基礎(chǔ)說明：

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

    屬性說明（順序依次對(duì)應(yīng)）： 陰影的X軸(可以使用負(fù)值)    陰影的Y軸(可以使用負(fù)值)    陰影模糊值（大?。?nbsp;   陰影的顏色

    內(nèi)陰影：box-shadow: X軸  Y軸  Rpx  color  inset;

    默認(rèn)是外陰影   內(nèi)陰影：inset 可以設(shè)置成內(nèi)部陰影

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

     因?yàn)槭切聦傩裕瑸榱思嫒莞髦髁鳛g覽器并支持這些主瀏覽器的較低版本，基于主流瀏覽器上使用box-shadow屬性時(shí)，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式，歐朋瀏覽器  -o-box-shadow   IE>9  -ms-box-shadow   

基礎(chǔ)練習(xí)：

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

測(cè)試1： <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>  box-shadow: 0 0 10px #f00  （因沒有使其X軸與Y軸移動(dòng) 設(shè)置值 所在會(huì)在本身發(fā)生作用   半徑范圍，顏色）

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

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

同理：你可以測(cè)試下一正值，一負(fù)值的效果，這里就不做測(cè)試了。。。。。。。。

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

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

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

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

最新評(píng)論