CSS中的陰影效果可以帶給我們網(wǎng)頁設(shè)計中更加吸引人的效果,其中就包括三個方向的陰影:上方陰影、右方陰影以及下方陰影。我們可以使用CSS3的box-shadow屬性來實現(xiàn)這些陰影效果:
.shadow { /* 上方陰影:x軸偏移0,y軸偏移-5px,模糊程度5px,擴散程度0,顏色黑色 */ box-shadow: 0 -5px 5px 0 black; }
上面的代碼實現(xiàn)了一個向上偏移的陰影效果,其中x軸偏移為0px,y軸偏移為-5px,陰影模糊程度為5px,擴散程度為0,顏色為黑色。
.shadow { /* 右方陰影:x軸偏移5px,y軸偏移0,模糊程度5px,擴散程度0,顏色黑色 */ box-shadow: 5px 0 5px 0 black; }
上面的代碼實現(xiàn)了一個向右側(cè)偏移的陰影效果,其中x軸偏移為5px,y軸偏移為0px,陰影模糊程度為5px,擴散程度為0,顏色為黑色。
.shadow { /* 下方陰影:x軸偏移0,y軸偏移5px,模糊程度5px,擴散程度0,顏色黑色 */ box-shadow: 0 5px 5px 0 black; }
上面的代碼實現(xiàn)了一個向下偏移的陰影效果,其中x軸偏移為0px,y軸偏移為5px,陰影模糊程度為5px,擴散程度為0,顏色為黑色。
通過以上方式,我們可以輕松實現(xiàn)三個方向的陰影效果。除了上述的參數(shù)設(shè)置外,我們也可以在屬性值中添加多個陰影效果以實現(xiàn)更加豐富的效果。例如:
.shadow { /* 上方和下方陰影:x軸偏移0,模糊程度5px,擴散程度0,上方y(tǒng)軸偏移-5px、顏色灰色,下方y(tǒng)軸偏移5px、顏色白色 */ box-shadow: 0 -5px 5px 0 gray, 0 5px 5px 0 white; }
上面的代碼實現(xiàn)了一個同時具有上下兩個方向陰影的效果,其中上方陰影的顏色為灰色,y軸偏移為-5px,下方陰影的顏色為白色,y軸偏移為5px。