1. 盒子陰影:
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
eg:
.box_shadow{
box-shadow:4px 2px 6px 7px #333333 inset;
}
同一盒子,可以同時加多個陰影,陰影之間用“,”隔開
.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
2. 字體陰影:
text-shadow:X-Offset Y-Offset blur color;
X-Offset:表示陰影的水平偏移距離,其值為正值時陰影向右偏移,反之向左偏移;
Y-Offset:是指陰影的垂直偏移距離,如果其值是正值時,陰影向下偏移,反之向上偏移;
Blur:是指陰影的模糊程度,其值不能是負值,如果值越大,陰影越模糊,反之陰影越清晰,如果不需要陰影模糊可以將Blur值設置為0;
Color:是指陰影的顏色,其可以使用rgba色。
比如,我們可以用下面代碼實現設置陰影效果。
text-shadow: 0 1px 1px #fff
3. 實現書擺放在桌子上的效果
效果
歡迎加入web前端沖擊頂級高薪大廠學習群,群聊號碼:820269529