一、基本使用方法
.box {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
}
box-shadow屬性接受四個值：水平偏移量、垂直偏移量、模糊半徑和陰影擴展半徑。rgba指定了顏色和透明度。
如果水平偏移量為正值，則陰影會在盒子的右邊，如果為負值，則陰影會在左邊。垂直偏移量和水平偏移量類似。
模糊半徑控制了陰影的模糊程度。較大的值會讓陰影看起來更柔和、更自然。陰影擴展半徑控制了陰影的大小。較大的值會讓陰影範圍更廣。
二、多重陰影的使用方法
.box {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5),
-10px -10px 10px 10px rgba(255, 255, 255, 0.5);
}
box-shadow屬性可以同時接受多個參數，用逗號分隔可以設置多重陰影。
上面的例子中，盒子有兩個陰影，一個是向右下的黑色陰影，另一個是向左上的白色陰影。
三、不規則陰影的使用方法
.box {
box-shadow: inset 0px 0px 0px 30px rgba(0,0,0,0.5);
}
box-shadow屬性還可以通過關鍵字” inset “創建內陰影。
上面的例子中，盒子內部有一圈30像素寬的內陰影。這種效果常常用在按鈕按下後，使其看起來更具立體感的效果上。
四、陰影效果的應用
陰影效果可以為元素添加層次感和立體感，加強了元素的視覺效果。
陰影效果在UI設計中也常被用於菜單、按鈕和卡片等元素的設計上。下面是一個例子：
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
color: #fff;
background-color: #4CAF50;
font-size: 16px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}
這個按鈕的背景色是#4CAF50，字體顏色為白色。陰影效果為2像素大小的黑色陰影，使按鈕看起來更有立體感。
五、小結
通過box-shadow屬性，可以為元素添加陰影效果，創建出層次感和立體感，使UI設計更具有視覺吸引力。
使用多重陰影、不規則陰影以及調整模糊半徑和擴展半徑等屬性，可以創造出更多的陰影效果。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/150582.html
微信掃一掃 
支付寶掃一掃 