box shadow屬性的詳細描述和相容性測試

box-shadow是css3屬性，用於向框新增乙個或多個陰影，相容ie9+以及火狐、chrome、opera等大部分主流瀏覽器。和psd軟體製作相比，box-shadow修改元素的陰影效果要簡單得多，因為box-shadow可以修改六個引數，來獲取不同的陰影顯示效果。

在前面文章css3中的box-shadow(陰影)使用說明和相容性問題已經做了闡述，有網友指出寫的不夠詳細，下面是這個特別綜合了常用的陰影案例對box-shadow屬性進行演示說明，希望對這方面尤其欠缺的朋友補補腦。開始的部分咱們先講一下如何使用box-shadow設定陰影效果，下面部分再綜合理清如何在不同的瀏覽器中使用，做到所有主流瀏覽器相容(ie下相容)。

box-shadow語法：

box-shadow: h-shadow v-shadow blur spread color inset;

物件選擇器

h-shadow：水平陰影的位置，正數則顯示右側陰影，負數顯示左側陰影。

v-shadow：垂直陰影的位置，正數則顯示下側陰影，負數顯示上側陰影。

blur：可選項，模糊距離，用來設定陰影邊緣的模糊化程度。

spread：可選項，陰影的尺寸，可放大或縮小陰影的尺寸。

color：陰影的顏色，用來設定當前陰影的顏色。

inset：可選項，預設的陰影將外部陰影(outset)，新增此引數改為內部陰影。

水平陰影指的是水平向左或者向右的陰影，水平陰影的引數為正數則表示向右的水平陰影；水平陰影的引數為負數則表示向左的水平陰影；水平陰影的引數為0則表示沒有水平陰影，下面是水平陰影的實際示例。

.shadow_horizontal_right

.shadow_horizontal_center
.shadow_horizontal_left

垂直陰影指的是垂直向上或者向下的陰影，垂直陰影的引數為正數則表示向下的垂直陰影；垂直陰影的引數為負數則表示向上的垂直陰影；垂直陰影的引數為0則表示沒有垂直陰影，下面是垂直陰影的實際示例。

.shadow_vertical_bottom

.shadow_vertical_center
.shadow_vertical_top

.shadow_right_bottom_blur

.shadow_right_top_blur
.shadow_left_bottom_blur
.shadow_left_top_blur

.shadow_right_bottom_blur_spread_small

.shadow_right_bottom_blur_spread
.shadow_right_bottom_blur_spread_big

.shadow_right_bottom_color_gray

.shadow_right_bottom_color_green
.shadow_right_bottom_color_red

.shadow_blur_spread_rgba

上面寫的box-shadow是在谷歌瀏覽器上使用的。正常情況下，我們要讓box-whadow相容絕大多數主流瀏覽器（包括ie瀏覽器），這裡開創者素材給大家提供了相容主流瀏覽器的**。

.jianrong

box shadow 屬性詳解

1.box shadow屬性語法 box shadow 屬性接受值最多由五個不同的部分組成。box shadow offset x offset y blur spread color position 換句說 物件選擇器 不像其它的屬性，比如 border，它們的接受值可以被拆分為一系列子屬性，b...

box shadow 屬性詳解

值 描述h shadow 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影的尺寸。color 可選。陰影的顏色。請參閱 css 顏色值。inset 可選。將外部陰影 outset 改為內部陰影。前兩個值和inset很...

CSS3box shadow屬性的使用

一 語法 e e 也可同時寫多組，如box shadow 0 10px fff 0 2px fff,0 3px fff 同時和transition使用可是動畫更流暢 二 取值 1.陰影型別 此引數可選，預設的投影方式是外陰影 如果取其唯一值 inset 就是將外陰影變成內陰影 2.x offset ...