《CSS3 經典教程系列》的前一篇文章向大家詳細介紹了線性漸變（linear-gradient）的用法，今天本文介紹的盒陰影（box-shadow）是目前用得最多的 CSS3 特性之一。盒陰影效果和圓角效果一樣都是做成圖片，直接編寫 CSS 代碼就可以實現。
CSS3 的 box-shadow 有點類似於 text-shadow，只不過不同的是 text-shadow 是對象的文本設置陰影，而 box-shadow 是給對象實現圖層陰影效果。本文我們擱下IE不談，只談談 box-shadow 的具體使用方法
語法：
box-shadow:inset x-offset y-offset blur-radius spread-radius color
也就是：
對象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色}
取值：
box-shadow屬性至多有6個參數設置，他們分別取值：
陰影類型
此參數是一個可選值，如果不設值，其默認的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影，也就是說設置陰影類型為“inset”時，其投影就是內陰影；
X-offset
是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊；
Y-offset
是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑：
此參數是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑
此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小
陰影顏色
此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
瀏覽器的兼容：
我們這里還涉及到一個各瀏覽器前綴的問題，比如說Mozilla內核的-moz，webkit內核的-webkit。經測試在最新版的Firefox和Google Chrome瀏覽器都無需加上前綴，但在safari中還是需要前緣的，為了能兼容支持的各大瀏覽器，我們在書寫box-shadow的格式應該這樣
//Firefox4.0- -moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
box-shadow的特征：
較之ps制作出來的圖片相比，CSS3的box-shadow可以通過改變其參數得到不同的效果，如：改變陰影偏移量的設置，我們可以使用陰影只在對象的上下左右的任一邊出現，也可以讓其出現在其中的某幾個邊上;其二可以隨時調節陰影大小，邊緣模糊度，陰影顏色，其三可以隨時更改為內陰影，另外還可以設置多個陰影效果
我們先來看一個簡單的實例：
.demo1 {
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
Firefox/Opera下效果 
Safari/Chrome下效果
回到上面那個實例，其實在webkit內核的瀏覽器Safari、Google Chrome里不會有任何陰影效果，雖然W3C標准里說顏色是可選擇的，但是在沒有給出顏色的時候 ，safari/chrome和firefox表現不同，在webkit內核的瀏覽器下陰影表現為透明色而mozilla和oprea下表現為黑色。基於這樣的原因，大家在使用box-shadow時不要忘了加上陰影顏色的值。
根據上面的現像，我們來看一個box-shadow有關陰影是否會被計算為內容的實例。
<div class="outer"> <div class="inter"> </div> </div>
我們把外面div設置為100px*100px,里面div設置為60px*60px，並在里面的div上加上一個向下向右偏移50px的綠色陰影，我們看看多出來的陰影會怎么樣？
.outer {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.inter {
width: 60px;
height: 60px;
margin: 10px auto;
background: #f69;
-webkit-box-shadow: 50px 50px green;
-moz-box-shadow: 50px 50px green;
box-shadow: 50px 50px green;
}
從各大瀏覽中的效果我們可以看出，陰影多出來的陰影會撐破容器跑出來。標准里有一張圖，描述了box-shadow的工作方式，這張圖直觀告訴我們如何使用box-shadow
這張圖可以告訴我們很多信息，比如說borer-radius圓角，陰影擴展、陰影模糊以及padding是如何影響對象陰影的：非零值的border-radius將會以相同的作用影響陰影的外形，但border-image不會影響對象陰影的任何外形；對象陰影同box模型的層次一樣，外陰影會在對象背景之下，內陰影會在邊框之下背景之上。所以整個層級就是：邊框>內陰影>背景圖片>背景顏色>外陰影。因為大家都知道，我們的背景圖片是在背景顏色之上的。
IE濾鏡方法：
在前面我們講過，IE9以下是不支持CSS3的box-shadow的，但為了處理這個兼容問題，我們可以在IE下使用IE的shadow陰影濾鏡來實現：
filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數值）, Strength=陰影半徑（數值）);
注意：該濾鏡必須配合background屬性一起使用，否則該濾鏡失效。除了使用濾鏡的方法外，我們還有一種方法可以實現IE下的效果。那就是使用jQuery的插件jquery.boxshadow.js。那么具體如何使用呢？其實很簡單，你先下載這個jquery.boxshadow.js插件到你的項目中，接着把jquery版本庫和jquery.boxshadow.js加載到頁面上，如：
<script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.boxshadow.js"></script>
然后你可以創建一個單獨的js文件來處理，或者直接在頁面的<head></head>里欠入一個<script> </script>，我們這里就只例出一個直接在head插入的解決辦法：
$(document).ready(function(){
if($.browser.msie) {
$('.demo1').boxShadow(0,0,5,"#888"); //demo1元素使用了box-shadow
$('.demo2').boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
}
});
上面我們了解了CSS3的box-shadow相關基礎知識，那么下面我們通過一些實例來鞏固一下box-shadow的具體用法：
如果沒有進行特殊說明，我們這里的實例所用的HTML代碼都如下，只是改變第二個class名稱，如demo1 demo2等：
<div class="demo demo2></div>
基本的CSS樣式：
.demo {
width: 100px;
height: 50px;
background: #f69;
}
提醒大家：為了節約時間，下面的css代碼中我只寫了一個box-shadow，但是大家在實際應用中一定要記得把:-webkit-box-shadow和-moz-box-shadow加上去，不然在safari和chrome瀏覽器下是會沒有任何效果的，這個我們在前面提過，此處不詳說。
效果一:單邊效果
.dome2 {
box-shadow: -2px 0 0 green, //左邊陰影
0 -2px 0 blue, //頂部陰影
0 2px 0 red, //底部陰影
2px 0 0 yellow; //右邊陰影
}
上例中，我們分別對對象的四個邊進行了box-shadow的設置，只不過我們使用了多層次的box-shadow應用，如果只需要在對象某一邊應用陰影時，我們可以刪除不使用陰影的設置。給對象四邊設計陰影，我們是通過改變x-offset和y-offset的正負值來實現，其中x-offset為負值時，生成左邊陰影，為正值時生成右邊陰影，y-offset為正值是生成底部陰影，為負值時生成頂部陰影。並且把模糊半徑設置為0，如果不設置為0的話那么其他三邊也將會有陰影，並且此處還涉及到一個多陰影的順序問題。當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層，如我們將上面的實例變一下，給其加上模糊值，將更能看出效果：
.demo3 {
box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;
}
這樣我們上例中：左邊的放在了第一，其green陰影色在頂邊的blue上，而頂邊的blue在又在右邊的yellow上，右這的yellow卻在底邊的red上。所以應用多次陰影的寫法一定要注意其順序問題，特別的當陰影的模糊值不一樣的情況之下，另外有些網站介紹說可以寫成下面的形式，但我經過多個瀏覽器測試，這種寫法是無效的，
.demo4 {
/*這種寫法是錯誤的（，網上有介紹說可以這樣書寫，但我測試多次未見效果，所以本人提倡不要這樣書次，以免造成不必要的錯誤）*/
box-shadow: -2px 0 0 green,box-shadow: 0 -2px 0 blue,box-shadow: 0 2px 0 red,box-shadow: 2px 0 0 yellow;
}
從上圖的效果中也再一次證明了上面的寫法是不正確的，希望大家在實際應用中時一定要注意多層次陰影的書寫方法。同時也提醒大家在網上看相關資料時一定不能盡信，最好是能自己抽空驗正一下。
在使用多層次的陰影時還需注意一個細節問題，如果前面的陰影模糊值小於后面的陰影模糊值，那么前面的顯示在后面之上，如果前面陰影的模糊值大於后面的陰影模糊值，那么前面的陰影將遮住后面的陰影效果。如下面例子：
/*第一個陰影模糊半徑值小於第二陰影模糊半徑*/
.demo5 {
box-shadow: 0 0 5px red,0 0 15px blue;
}
/第一個陰影模糊半徑大於第二陰影模糊半徑*/
.demo6 {
box-shadow: 0 0 15px red, 0 0 5px blue;
}
實例效果再次證明：左圖中我們可以看見紅色陰影在蘭色陰影之上並沒有遮蓋藍色陰影，因為我們紅色的陰影模糊值只有5px，比藍色的15px模糊值要小；而右圖中我們只能看到紅色的陰影，那是因為我們第一個紅色陰影的模糊半徑大於第二個蘭色的模糊半徑，所以紅色的陰影把藍色的陰影遮蓋住了。這一點大家可記住了。
效果二：四邊具有相同的陰影效果（只設置陰影模糊半徑和陰影顏色）
.demo7 {
box-shadow: 0 0 5px rgb(250,0,0);
}
我們在這里設置的是HEX值，我們也可以應用css3的rgba值給box-shadow的陰影顏色上，這樣的好處是，box-shadow陰影色多了一個alpha透明值 ，如下面的實例：
.demo8 {
box-shadow: 0 0 5px rgba(250,0,0,0.5);
}
對比上面兩個例子，前一個例子我們沒有應用透明值，而后面一個例子我們應用了0.5的透明值，相比之下后面的陰影是不是更淺。當然在實踐應用中您可以根據自己的需求進行設置。
效果三：四邊具有相同的陰影（只設置陰影擴展半徑和陰影顏色）
.demo9 {
box-shadow: 0 0 0 1px red;
}
從效果中大家想想這種效果是不是跟我們在元素中的boder: 1px solid red;屬性產生的效果很相似的呀。對的，box-shadow不單可以制作出陰影的效果，我們還可以利用其擴展半徑這個值，來給對象制作出類似於邊框的樣式。下面我們來看一個對比的實例：
/*邊框效果*/
.demo10 {
border: 1px solid red;
}
/*陰影效果*/
.demo11 {
box-shadow: 0 0 0 1px red;
}
實際上利用box-shadow來制作邊框，只能說看上去像邊框，但實質其並非邊框，他和border還是有本質上的區別。從上面的效果圖中我們明顯的可以看出左邊的box要比右邊的box低那么1px的，這樣一來隨着其擴展半徑值越大，兩者之間的相差就更大，如：
.demo12 {
border: 20px solid red;
}
.demo13 {
box-shadow: 0 0 0 20px red;
}
我們接着來看demo12和demo13兩個demo在firebug下的layout圖：
結合上圖兩者在firebug下的layout圖，更證實了我們前面所講的陰影不會影響頁面的任何布局：demo12的邊框被計算了寬度，但demo13的陰影瀏覽器卻忽略不計，所以借住這個特點，我們陰影所模擬的邊框理可以自由的使用，但必須要注意其層級關系。
您可能感興趣的相關文章
本文鏈接：CSS3入門教程：CSS3盒陰影（整理自：W3CPLUS）