css3 box-shadow陰影圖文教學

這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發光)，透過五個測試透過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下

基本說明：

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

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

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

##    預設為外陰影   內陰影：inset 可設定為內部陰影

    注意（PS）：此屬性使用於盒模型如(p,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：

  box-shadow: 0 0 10px #f00  （因沒有使其X軸與Y軸移動設定值所在會在本身發生作用   半徑範圍，顏色）

測試2：

box-shadow:4px 4px 10px #f00;與測試1不同X軸與Y軸改變了正值（正值（正值值向右向下） 所以變成了這樣‍

測試3：

box-shadow:-4px -4px 10px #f00;與測試2不同之處是X軸與Y軸改變成了負值（負值向左向上） 所以變成了這樣‍

同理：你可以測試下一正值，一負值的效果，這裡就不做測試了。 。 。 。 。 。 。 。

測試4：

box-shadow : 0px 0px 10px red inset;    與上面寫法相同唯一不同的是添加了一個inset 其它屬性與外陰影相同

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

以上是css3 box-shadow陰影圖文教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！