CSS4邊陰影是CSS4新提出的特性之一,允許我們為元素的邊框添加陰影效果。
.box { box-shadow: inset 0 0 10px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.3), inset 0 0 30px rgba(0,0,0,.1); }
邊陰影支持四個值,分別對應水平偏移、垂直偏移、模糊半徑、陰影擴散半徑。我們可以使用inset關鍵字來表示內陰影。
當我們想要指定多個邊陰影時,只需將多個陰影參數連綴在一起即可。
.box { box-shadow: 0 10px 20px rgba(0,0,0,.2), 0 20px 40px rgba(0,0,0,.1), -10px 0 20px rgba(0,0,0,.1); }
上述代碼表示我們在元素底邊添加一條距離10px、模糊半徑為20px的黑色陰影,同時在元素右側添加一條距離10px、模糊半徑為20px的黑色陰影,最后在元素左側添加一條距離10px、模糊半徑為20px的黑色陰影。
邊陰影可以傳遞參數h-shadow,v-shadow,blur,spread和color。分別代表水平陰影的長度、垂直陰影的長度、陰影的模糊半徑、陰影的擴散半徑和陰影的顏色。
同時我們可以使用新的語法方式去除全部或者部分的參數。
.box { box-shadow: 10px 10px; box-shadow: 10px 10px at top left; box-shadow: 10px 10px 20px 5px; box-shadow: inset 10px 10px 20px 5px; }
box-shadow語法表示在元素框的所有邊緣添加相同的陰影,而drop-shadow則會在元素邊緣添加一個陰影外形。drop-shadow也可以采用新的語法方式調整參數。
.box { drop-shadow: 10px 10px; drop-shadow: 10px 10px at top left; drop-shadow: 10px 10px 20px red; drop-shadow: 10px 10px 20px 5px red; }
總之,使用邊陰影可以讓我們在實現界面設計時增加更多的細節效果,增加頁面美感與用戶體驗。