css3 box-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