css3 box-shadow陰影(外陰影與外發光)講解

基礎說明：

    外陰影：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的動畫效果， 閃光層（字）都很簡單實現。。但願對你有幫助。。