css3 box-shadow 使用方法詳解，css3box-shadow

css3 box-shadow 使用方法詳解，css3box-shadow

其用法為：

代碼如下	複製代碼
box-shadow: x-offset y-offset blur spread color inset;

上述六個參數含義依次是水平方向的位移（正值向右位移，負值向左位移）、垂直方向的位移（正值向下位移，負值向上位移）、模糊距離、陰影的尺寸（擴充尺寸）、陰影的顏色以及陰影類型（預設是外陰影，使用inset表示為內陰影）。除了第一和第二個參數是必須的，其他的都是選擇性參數。當使用參數“0 0px 10px #333”時，注意第三個參數為陰影的模糊距離。

由於參數本身就多，而且還可以變，下面通過一些例子來加深一下理解。

先來看看什麼是陰影，下面通過四個寬和高都為70px的div，使用如下box-shadow來看看顯示效果：

代碼如下	複製代碼
#d1 { box-shadow:0 0 0px #333;}#d2 { box-shadow:70px 0 0px #333;}#d3 { box-shadow:0 70px 0px #333;}#d4 { box-shadow:70px 0px 0px #333;}

觀察上述圖，可以理解陰影其實是被原始塊對象遮蓋，但是可以通過x-offset和y-offset來移動陰影（相對於原始快對象）。

現在通過3個70x70px的div來看看模糊的效果，box-shadow設定如下：

代碼如下	複製代碼
#d5 { box-shadow:0 0 10px 0px #333;}#d6 { box-shadow:70px 70px 20px 0px #333;}#d7 { box-shadow:70px 70px 40px 0px #333;}

模糊就是對陰影由內到進行模糊處理，www.111cn.net/對比d6和d7，可以看到模糊參數值越大，模糊的面積也越大。

最後來看看看模糊距離參數，box-shadow設定如下：

代碼如下	複製代碼
#d8 { box-shadow:0px 0px 0px 10px #333;}#d9 { box-shadow:80px 80px 0px 10px #333;}#d10 { box-shadow:80px 80px 10px 10px #333;}

原文:http://www.111cn.net/cssdiv/css/50547.htm