text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。
基本語法:
box-shadow: h-shadow v-shadow blur spread color inset;
{box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}
box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
| 值 | 描述 | 使用情況 |
|---|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 | 如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊； |
| v-shadow | 必需。垂直陰影的位置。允許負值。 | 如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部； |
| blur | 可選。模糊距離。 | 如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊； |
| spread | 可選。陰影的尺寸。 | 如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小； |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 | 如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色（已驗證），建議不要省略此參數。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 | 如果設置則陰影在內部，不設置陰影在外部，默認在外部 |
瀏覽器兼容
| IE | Firefox | Chrome | Opera | Safari | 是否支持 |
|---|---|---|---|---|---|
| IE6、IE7、IE8 | Firefox 3.0.10 | Opera 9.64 | 不支持 | ||
| IE9 | Firefox 3.5 | Chrome 2.0 | Opera 10.6 | Safari4 | 不支持 |
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成 -webkit-box-shadow 的形式。Firefox瀏覽器則需要寫成 -moz-box-shadow 的形式。
.box-shadow{
//Firefox4.0-
-moz-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Safariand Google chrome10.0-
-webkit-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
}
參考資料
-
- 里面對
box-shadow的使用例子做了全面描述，在做高級處理時可以參考
- 里面對
