CSS3的box-shadow屬性可以在元素的邊框和內容區之間添加陰影,讓頁面的視覺效果更加豐富。定義此屬性時可以設置的值如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,h-shadow和v-shadow分別表示陰影距離水平和垂直方向的偏移量,可以為正負值;blur表示陰影的模糊半徑,通常使用像素值;spread表示陰影的擴展半徑,可以為負值;color表示陰影的顏色,可以使用十六進制、RGB、RGBA等方式進行設置;inset表示陰影為內陰影。
下面是一個例子,演示如何使用box-shadow屬性:
.shadow { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
以上樣式會在元素周圍添加一個5像素的陰影,陰影顏色為半透明的黑色,效果如下:
這是一個帶陰影的元素
需要注意的是,box-shadow屬性會使得元素的渲染效率稍微降低一些,因此在使用時需要考慮好是否必要,并且在低端設備上要避免使用過多的陰影效果。
上一篇下邊框怎么設置css