box-shadow是CSS3新增的一個屬性,可以給元素添加陰影效果,其默認值為none。下面將從多個方面對box-shadow默認值做詳細的闡述。
一、box-shadow屬性的語法
box-shadow屬性的語法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,h-shadow和v-shadow參數是必須的,指定水平和垂直方向的陰影偏移量;blur是可選的,指定陰影的模糊半徑;spread也是可選的,指定陰影的擴展半徑;color是陰影的顏色;inset是可選的,指定陰影是內陰影(在邊框內部)還是外陰影(在邊框外部),默認是外陰影。
二、添加多重陰影
box-shadow屬性可以添加多重陰影。代碼示例:
.shadow { box-shadow: 0px 0px 10px #000, 0px 0px 20px #000, 0px 0px 30px #000; }
上面的代碼給元素添加了3層陰影,分別為10px、20px、30px的模糊半徑。
三、應用在特定元素上
box-shadow默認值可以應用在所有的元素上,例如:
div { box-shadow: 0px 0px 10px #000; } ul { box-shadow: 0px 0px 10px #000; }
上面的代碼將給所有的div和ul元素添加相同的陰影效果。
四、應用在特定狀態的元素上
box-shadow默認值可以應用在特定狀態下的元素上,例如:
.button:hover { box-shadow: 0px 0px 10px #000; }
上面的代碼將給所有鼠標懸停在.button元素上時添加陰影效果。
五、應用顏色透明的陰影
使用rgba()函數可以創建顏色透明的陰影。代碼示例:
.shadow { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
上面的代碼給元素添加了一個模糊半徑為10px,顏色為黑色、透明度為0.5的陰影。
六、給陰影添加圓角
使用border-radius屬性可以給陰影添加圓角效果。代碼示例:
.shadow { box-shadow: 0px 0px 10px #000; border-radius: 10px; }
上面的代碼給元素添加了一個模糊半徑為10px的黑色陰影,并給元素本身添加了圓角效果。