CSS+DIV投影效果,可以讓網(wǎng)頁內(nèi)容更加立體,增加視覺層次感,形成暗淡的陰影效果。以下是實(shí)現(xiàn)CSS+DIV投影效果的代碼:
.shadow{ position: relative;/*定位*/ } .shadow:before{ content: "";/*內(nèi)容(不能省略)*/ position: absolute;/*定位*/ top: 6px;/*向上偏移距離*/ left: 6px;/*向左偏移距離*/ width: 50%;/*寬度*/ height: 100%;/*高度*/ background: #999999;/*背景顏色*/ z-index: -1;/*設(shè)置堆疊順序*/ transform: rotate(-3deg);/*旋轉(zhuǎn)傾斜角度*/ box-shadow: 8px 8px 8px rgba(0,0,0,0.3);/*設(shè)置陰影*/ }
以上代碼主要分為以下幾個(gè)部分:
1. .shadow:創(chuàng)建一個(gè)類名為shadow的樣式,在該類名下設(shè)置陰影效果。
2. .shadow:before:添加一個(gè)偽元素:before,用來實(shí)現(xiàn)陰影效果,通過定位、高寬、背景色等屬性來模擬陰影效果。
3. content: "":此屬性不能省略,表示偽元素的內(nèi)容為空。
4. transform: rotate(-3deg):對(duì)陰影元素進(jìn)行旋轉(zhuǎn)傾斜,讓陰影更加逼真,達(dá)到更好的效果。
5. box-shadow: 8px 8px 8px rgba(0,0,0,0.3):通過box-shadow屬性來實(shí)現(xiàn)陰影,其中8px表示橫向、縱向、陰影大小,rgba(0,0,0,0.3)表示陰影的顏色和透明度。
通過這樣的方式可以給網(wǎng)頁增加更加立體、逼真的效果,使內(nèi)容更加突出、明顯。