基礎語法
外陰影: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 其它屬性與外陰影相同