基礎說明：

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

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

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

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

??? 注（PS）：此屬性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用來設置文字陰影?? 如果設置文字陰影請參考知識點:text-shadow（同理）

???? 因為是新屬性，為了兼容各主流瀏覽器并支持這些主瀏覽器的較低版本，基于主流瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式

??????????????????????? 歐朋瀏覽器? -o-box-shadow?? IE>9? -ms-box-shadow????

基礎練習：

為了更好的了解box-shadow的特征，做幾個小測試：(為了方便直接在標簽內嵌套樣式)

?測試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?其它屬性與外陰影相同

???

百變不離其宗，練習就能熟悉，懂了就知道原理,隨意改寫，在配合css3的動畫效果， 閃光層（字）都很簡單實現。。希望對你有幫助。。

總結

以上是生活随笔為你收集整理的css3 box-shadow阴影(内外阴影与发光)讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。