IT兄弟連 HTML5教程 CSS3屬性特效 盒模型陰影

 

除了爲文字添加陰影，咱們還能夠爲盒模型添加陰影。盒模型陰影的屬性名稱爲box-shadow,此屬性與text-shadow同樣有4個值，前兩個值分別表示水平方向位移距離和垂直方向的位移距離，第三個值表示陰影的模糊半徑（包含0及如下的值均表示無模糊），最後一個則是陰影的顏色。前Chrome 16+，FireFox8+，Opera11.6+，Safari5.1+以及IE9+都可直接使用box-shadow，而不須要-webkit-諸如此類的前綴。

語法格式以下所示：

box-shadow:[inset] x y blur [spread] color

box-shadow的參數說明如表1所示。

表1  box-shadow參數說明

 

 

與文字陰影text-shaow的參數意義一致，橫向偏移量和縱向偏移量能夠爲負值，表明盒模型陰影向左偏移或向上偏移。盒模型陰影也是能夠疊加的。添加多層陰影用「，」隔開。陰影疊加是先渲染後面的再渲染前面的。

 

1．最簡單的用法

box-shadow:2px 2px 20px #000;

此語法說明爲一段文字設定橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲20px的黑色陰影。如下是一個單層陰影的例子。代碼以下:

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，我麼能夠看到box的外面增長了一層黑色的陰影，如圖1所示。

圖1  盒模型陰影

 

2．盒模型陰影投影方式

box-shadow: inset 2px 2px 20px #000;

此語法說明爲盒模型嵌套一層內投影。橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲20px的黑色內投影。代碼以下：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，盒模型被加上了內投影，如圖2所示：

圖2  盒模型內投影

 

3．盒模型陰影疊加

box-shadow: 2px 2px 20px green，inset 2px 2px 20px blue;

此語法說明爲盒模型設定雙層陰影。第一層爲橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲20的向外的綠色陰影，第二層爲橫向偏移量爲2px，縱向偏移量爲2px，模糊距離爲20px的藍色內投影。代碼以下：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，box被加上了兩層陰影，其中有一層是內投影，如圖3所示。

圖3  盒模型陰影疊加