外陰影：box-shadow: X軸 Y軸 Rpx color;
屬性說明（依序對應）： 陰影的X軸(可用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色
# 內陰影：box-shadow:
內陰影：box-shadow: X軸 Y軸 Rpx color
inset;# 預設外部陰影 內陰影：inset 可設定為內部陰影##o 此屬性使用於盒模型如(p,p,h1,h2,h3,h4,h5,h6等) 不是用來設定文字陰影 如果設定文字陰影請參考知識點:text-shadow
（同理）
因為是新屬性，為了相容於各主流瀏覽器並支援這些主瀏覽器的較低版本，基於主流瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。 Firefox瀏覽器則需要寫成-moz-box-shadow的形式
基礎練習：
為了更好的了解box-shadow的特徵，做幾個小測試：(為了方便直接在標籤內嵌套樣式)測試1：
<p style="box-shadow: 0 0 10px #f00; border:1px solid green">
</p> box-shadow: 0 0 10px #f00
登入後複製
（因為沒有使其X軸與Y軸移動設定值所在會在本身發生作用 半徑範圍，顏色）
測試2：
#與測試1不同X軸與Y軸改變了<p style="box-shadow:4px 4px 10px #f00; border:1px solid green">
</p> box-shadow:4px 4px 10px #f00;
登入後複製
正值
#測試3：
#與測試2不同之處是X軸與Y軸改變變成了負值（負值向左向上） 所以變成了這樣<p style="box-shadow:-4px -4px 10px #f00; border:1px solid green">
</p> box-shadow:-4px -4px 10px #f00;
登入後複製
##同理：你可以測試下一正值，一負值的效果，這裡就不做測試了。 。 。 。 。 。 。 。
測試4：<p style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green,
/*右边阴影*/
0px 10px 10px blue;"
/*下边阴影*/
></p>
登入後複製
测试5：--内阴影
<p style="box-shadow: 0px 0px 10px red inset; border:1px solid green"> </p> box-shadow: 0px 0px 10px red inset;
与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
百变不离其宗，练习就能熟悉，懂了就知道原理,随意改写，在配合css3的动画效果， 闪光层（字）都很简单实现。。希望对你有帮助。。
以上是css3中關於box-shadow外陰影以及外發光的範例詳解（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
