一、使用box-shadow製作陰影效果
CSS3中提供了box-shadow屬性，可以用於製作陰影效果。
.shadow {
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
box-shadow的參數分別表示：水平偏移量、垂直偏移量、模糊半徑、陰影顏色。
可以設置多個陰影效果：
.shadow {
box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.2);
}
二、使用text-shadow製作字體陰影效果
text-shadow屬性可以用於在字體周圍添加一個投影。
.shadow {
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
text-shadow的參數與box-shadow類似，分別表示：水平偏移量、垂直偏移量、模糊半徑、陰影顏色。
三、使用偽元素和:before/:after製作陰影效果
可以使用偽元素和before/:after為元素添加陰影效果。
.shadow:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
首先將偽元素的內容設為空，設置絕對定位，然後使用box-shadow屬性創建陰影效果。
四、使用背景圖片製作陰影效果
在背景圖片中使用漸變效果可以製作出陰影效果。
.shadow {
background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
}
linear-gradient的參數分別表示：漸變方向、起始顏色、結束顏色、顏色變化的百分比。
五、使用outline製作陰影效果
可以使用outline屬性製作簡單的邊框陰影效果。
.shadow {
outline: 2px solid rgba(0,0,0,0.2);
outline-offset: -2px;
}
outline的參數分別表示：邊框寬度、邊框樣式、邊框顏色。
outline-offset表示輪廓的偏移量，可以用負值實現陰影效果。
原創文章，作者：TQJL，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/139148.html
微信掃一掃 
支付寶掃一掃 