CSS3之box-shadow--陰影外陰影與外發光


基礎語法

外陰影:box-shadow:X Y Npx #color;

內陰影:box-shadow:inset X Y Npx #color;

 

第一個屬性:陰影的X軸(可以使用負值)

第二個屬性:陰影的Y軸(可以使用負值)

第三個屬性:陰影的像素(大小)

第四個屬性:陰影的顏色

 

內陰影:inset 這個可以設置內部陰影 具體看示例4

 

:此屬性使用於盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用來設置文字陰影 如果設置文字陰影請參考:text-shadow

示例1

使用樣式:box-shadow:0px 0px 8px #f00;因沒有使其它X軸與Y軸移動 所在會在本身發生作用 后面的屬性我想做前端的應該很明白了

示例2

使用樣式:box-shadow:3px 3px 8px #f00;這時候與上面的不同 X軸與Y軸改變了 所以變成了這樣‍

示例3

使用樣式:box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;也許你看到這樣的代碼會感覺很亂 但是看到效果圖片之后我想你就能立刻懂得這是怎么做的了無非改一下X軸與Y軸與顏色值 還有陰影大小

示例4——內陰影

‍樣式使用:box-shadow: inset 0px 0px 30px red;與上面的相同 唯一不同的是添加了一個inset 其它屬性與外陰影相同


免責聲明!

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



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