CSS中可以通過box-shadow屬性來設置元素的陰影效果。我們可以通過調整box-shadow的屬性值實現設置左右陰影的效果。
.shadow { box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.3), -10px 0 10px -5px rgba(0, 0, 0, 0.3); }
上面的代碼中,我們為.shadow類添加了一個box-shadow屬性。屬性值包括兩個陰影值,用逗號隔開。第一個陰影值是10px 0 10px -5px rgba(0, 0, 0, 0.3),表示距離右邊10像素,不增加豎向偏移,模糊程度為10像素,陰影大小為元素寬度+10像素,顏色為黑色半透明;第二個陰影值是-10px 0 10px -5px rgba(0, 0, 0, 0.3),表示距離左邊10像素,不增加豎向偏移,模糊程度為10像素,陰影大小為元素寬度+10像素,顏色為黑色半透明。
通過這樣的設置,我們就可以實現左右陰影的效果。如果想要設置其他方向的陰影效果,只需要調整box-shadow屬性中的坐標和大小值即可。
上一篇css如何設置毛玻璃
下一篇css如何設置瀏覽按鈕