1. 程式人生 > >CSS--外發光與內陰影

CSS--外發光與內陰影

依次 屬性 css info 代碼 color 分享圖片 不同 image

外陰影:box-shadow: X軸 Y軸 Rpx color;

屬性說明(順序依次對應): 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值(大小) 陰影的顏色

內陰影:box-shadow: X軸 Y軸 Rpx color inset;

  默認是外陰影 內陰影:inset 可以設置成內部陰影

測試1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00 (因沒有使其X軸與Y軸移動 設置值 所在會在本身發生作用 半徑範圍,顏色)

技術分享圖片

測試2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;與測試1不同 X軸與Y軸改變了正值(正值 向右 向下) 所以變成了這樣?

技術分享圖片

測試3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;與測試2不同 之處是 X軸與Y軸改變成了負值(負值 向左 向上) 所以變成了這樣?

技術分享圖片

同理:你可以測試下一正值,一負值的效果,這裏就不做測試了。。。。。。。。

測試4:<div style="box-shadow:-10px 0px 10px red, /*左邊陰影*/
0px -10px 10px #000, /*上邊陰影*/
10px 0px 10px green, /*右邊陰影*/
0px 10px 10px blue;" /*下邊陰影*/ ></div>

你看到這樣的代碼會感覺很亂 但是看到效果圖片之後你就能明白這是怎麽做的了無非改一下X軸與Y軸位置與顏色值 還有陰影值大小,(用逗號隔開)多練習幾次就好

技術分享圖片

測試5:--內陰影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 與上面寫法相同 唯一不同的是添加了一個inset 其它屬性與外陰影相同

技術分享圖片

原文鏈接:https://www.cnblogs.com/telwanggs/p/7736454.html

CSS--外發光與內陰影