色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css4邊陰影

呂致盈2年前12瀏覽0評論

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;
}

總之,使用邊陰影可以讓我們在實現界面設計時增加更多的細節效果,增加頁面美感與用戶體驗。