css3之陰影


 

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM