本文講訴了CSS3陰影 box-shadow的使用和技巧，具體如下：
text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS3的普及，這一特殊效果使用越來越普遍。
基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}
box-shadow屬性的參數設置取值：
陰影類型：此參數可選。如不設值，默認投影方式是外陰影；如取其唯一值“inset”，其投影為內陰影；
X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；
陰影模糊半徑：此參數可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色（已驗證），建議不要省略此參數。
瀏覽器的兼容：
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。
box-shadow{
//Firefox0-
-moz-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Safariand Google chrome0-
-webkit-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Firefox0+、 Google chrome 0+ 、 Oprea5+ and IE9
box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
}
注意：出于方便，后文的css屬性有的地方只寫了box-shadow屬性，沒有寫-moz-和-webkit-前綴的形式，在使用中不要忘記加上。
為了更清楚的了解box-shadow的特征，做幾個小測試，看效果：
相關代碼：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS3屬性：box-shadow測試</title>
<script type="text/javascript" src="js/jqueryminjs"></script>
<script type="text/javascript" src="js/jqueryboxshadowjs"></script>
<style type="text/css">
box-shadow-1{
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
box-shadow-3{
-webkit-box-shadow:0 0 10px rgba(0, 204, 204, 5);
-moz-box-shadow:0 0 10px rgba(0, 204, 204, 5);
box-shadow:0 0 10px rgba(0, 204, 204, 5);
}
box-shadow-4{
-webkit-box-shadow:0 0 10px 15px #0CC;
-moz-box-shadow:0 0 10px 15px #0CC;
box-shadow:0 0 10px 15px #0CC;
}
box-shadow-5{
-webkit-box-shadow:inset 0 0 10px #0CC;
-moz-box-shadow:inset 0 0 10px #0CC;
box-shadow:inset 0 0 10px #0CC;
}
box-shadow-6{
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
}
box-shadow-7{
box-shadow:0 0 10px 5px black,
0 0 10px 20px red;
}
box-shadow-8{
box-shadow:0 0 10px 20px red,
0 0 10px 5px black;
}
box-shadow-9{
box-shadow: 0 0 0 1px red;
}
obj{
width:100px;
height:100px;
margin:50px auto;
background:#eee;
}
outer{
width: 100px;
height: 100px;
border: 1px solid red;
}
inner{
width: 60px;
height: 60px;
background-color: red;
-webkit-box-shadow: 50px 50px blue;
-moz-box-shadow: 50px 50px blue;
box-shadow: 50px 50px blue;
}
</style>
</head>
<body>
<div class="obj box-shadow-1"></div>
<div class="outer">
<div class="inner"></div>
</div>
<div class="obj box-shadow-2" ></div>
<div class="obj box-shadow-3" ></div>
<div class="obj box-shadow-4" ></div>
<div class="obj box-shadow-5" ></div>
<div class="obj box-shadow-6" ></div>
<div class="obj box-shadow-7" ></div>
<div class="obj box-shadow-8" ></div>
<div class="obj box-shadow-9" ></div>
<script type="text/javascript">
$(document)ready(function(){
if($browsermsie) {
$('obj')boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow
}
});
</script>
</body>
</html>
結論：