box-shadow:給元素塊添加周邊陰影效果。
語法:box-shadow: h-shadow v-shadow blur spread color inset;
*還有另壹種情況: box-shadow: 0 2px 2px #FECC84
當我們在色值前只寫了三個數值的情況下,則第三個值是 blur (模糊距離)。
利用陰影屬性,也可以實現外邊框的效果:
當我們再為它添加壹個 outline (輪廓),就會發現它實現了-邊框內圓角:
* 關於為什麽會這樣:
outline的描邊並不會跟著圓角走,因此顯示為直角。
所以把這兩者疊加到壹起,box-shadow 則剛好填補描邊與容器圓角之間的空隙。
*值得註意的是,box-shadow 陰影的大小值並不壹定等於描邊的寬度,它和圓角的大小有關系。所以只需要壹個足夠填補空隙的大小就可以了。事實上,制定壹個等於描邊寬度的值在某些瀏覽器中可能會渲染異常,所以,最好是稍小的值。
參考書籍: Lea Verou 《CSS揭秘》