《CSS3 經典教程系列》的前一篇文章向大家詳細介紹了線性漸變（linear-gradient）的用法，今天本文介紹的盒陰影（box-shadow）是目前用得最多的 CSS3 特性之一。盒陰影效果和圓角效果一樣都是做成圖檔，直接編寫 CSS 代碼就可以實作。
您可能感興趣的相關文章
<a href="http://www.cnblogs.com/lhb25/archive/2012/12/12/must-read-links-for-web-designers-and-developers-volume-12.html" target="_blank">Web 開發人員和設計師必讀文章推薦</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/03/05/few-new-collections-css3-effects.html" target="_blank">20個非常絢麗的 CSS3 特性應用示範</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">35個讓人驚訝的 CSS3 動畫效果示範</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/05/12/2020284.html" target="_blank">推薦12個漂亮的 CSS3 按鈕實作方案</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/03/09/1964344.html" target="_blank">24款非常實用的 CSS3 工具終極收藏</a>
CSS3 的 box-shadow 有點類似于 text-shadow，隻不過不同的是 text-shadow 是對象的文本設定陰影，而 box-shadow 是給對象實作圖層陰影效果。本文我們擱下IE不談，隻談談 box-shadow 的具體使用方法
文法：
也就是：
取值：
box-shadow屬性至多有6個參數設定，他們分别取值：
陰影類型
此參數是一個可選值，如果不設值，其預設的投影方式是外陰影；如果取其唯一值“inset”,就是将外陰影變成内陰影，也就是說設定陰影類型為“inset”時，其投影就是内陰影；
X-offset
是指陰影水準偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊；
Y-offset
是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑：
此參數是可選，，但其值隻能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴充半徑
此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小
陰影顔色
此參數可選，如果不設定任何顔色時，浏覽器會取預設色，但各浏覽器預設色不一樣，特别是在webkit核心下的safari和chrome浏覽器将無色，也就是透明，建議不要省略此參數。
浏覽器的相容：
我們這裡還涉及到一個各浏覽器字首的問題，比如說Mozilla核心的-moz，webkit核心的-webkit。經測試在最新版的Firefox和Google Chrome浏覽器都無需加上字首，但在safari中還是需要前緣的，為了能相容支援的各大浏覽器，我們在書寫box-shadow的格式應該這樣
box-shadow的特征：
較之ps制作出來的圖檔相比，CSS3的box-shadow可以通過改變其參數得到不同的效果，如：改變陰影偏移量的設定，我們可以使用陰影隻在對象的上下左右的任一邊出現，也可以讓其出現在其中的某幾個邊上;其二可以随時調節陰影大小，邊緣模糊度，陰影顔色，其三可以随時更改為内陰影，另外還可以設定多個陰影效果
我們先來看一個簡單的執行個體：
Firefox/Opera下效果
Safari/Chrome下效果
回到上面那個執行個體，其實在webkit核心的浏覽器Safari、Google Chrome裡不會有任何陰影效果，雖然W3C标準裡說顔色是可選擇的，但是在沒有給出顔色的時候 ，safari/chrome和firefox表現不同，在webkit核心的浏覽器下陰影表現為透明色而mozilla和oprea下表現為黑色。基于這樣的原因，大家在使用box-shadow時不要忘了加上陰影顔色的值。
根據上面的現像，我們來看一個box-shadow有關陰影是否會被計算為内容的執行個體。
我們把外面div設定為100px*100px,裡面div設定為60px*60px，并在裡面的div上加上一個向下向右偏移50px的綠色陰影，我們看看多出來的陰影會怎麼樣？
從各大浏覽中的效果我們可以看出，陰影多出來的陰影會撐破容器跑出來。标準裡有一張圖，描述了box-shadow的工作方式，這張圖直覺告訴我們如何使用box-shadow
這張圖可以告訴我們很多資訊，比如說borer-radius圓角，陰影擴充、陰影模糊以及padding是如何影響對象陰影的：非零值的border-radius将會以相同的作用影響陰影的外形，但border-image不會影響對象陰影的任何外形；對象陰影同box模型的層次一樣，外陰影會在對象背景之下，内陰影會在邊框之下背景之上。是以整個層級就是：邊框>内陰影>背景圖檔>背景顔色>外陰影。因為大家都知道，我們的背景圖檔是在背景顔色之上的。
IE濾鏡方法：
在前面我們講過，IE9以下是不支援CSS3的box-shadow的，但為了處理這個相容問題，我們可以在IE下使用IE的shadow陰影濾鏡來實作：
然後你可以建立一個單獨的js檔案來處理，或者直接在頁面的<head></head>裡欠入一個<script> </script>，我們這裡就隻例出一個直接在head插入的解決辦法：
上面我們了解了CSS3的box-shadow相關基礎知識，那麼下面我們通過一些執行個體來鞏固一下box-shadow的具體用法：
如果沒有進行特殊說明，我們這裡的執行個體所用的HTML代碼都如下，隻是改變第二個class名稱，如demo1 demo2等：
基本的CSS樣式：
提醒大家：為了節約時間，下面的css代碼中我隻寫了一個box-shadow，但是大家在實際應用中一定要記得把:-webkit-box-shadow和-moz-box-shadow加上去，不然在safari和chrome浏覽器下是會沒有任何效果的，這個我們在前面提過，此處不詳說。
效果一:單邊效果
上例中，我們分别對對象的四個邊進行了box-shadow的設定，隻不過我們使用了多層次的box-shadow應用，如果隻需要在對象某一邊應用陰影時，我們可以删除不使用陰影的設定。給對象四邊設計陰影，我們是通過改變x-offset和y-offset的正負值來實作，其中x-offset為負值時，生成左邊陰影，為正值時生成右邊陰影，y-offset為正值是生成底部陰影，為負值時生成頂部陰影。并且把模糊半徑設定為0，如果不設定為0的話那麼其他三邊也将會有陰影，并且此處還涉及到一個多陰影的順序問題。當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影将顯示在最頂層，如我們将上面的執行個體變一下，給其加上模糊值，将更能看出效果：
這樣我們上例中：左邊的放在了第一，其green陰影色在頂邊的blue上，而頂邊的blue在又在右邊的yellow上，右這的yellow卻在底邊的red上。是以應用多次陰影的寫法一定要注意其順序問題，特别的當陰影的模糊值不一樣的情況之下，另外有些網站介紹說可以寫成下面的形式，但我經過多個浏覽器測試，這種寫法是無效的，
從上圖的效果中也再一次證明了上面的寫法是不正确的，希望大家在實際應用中時一定要注意多層次陰影的書寫方法。同時也提醒大家在網上看相關資料時一定不能盡信，最好是能自己抽空驗正一下。
在使用多層次的陰影時還需注意一個細節問題，如果前面的陰影模糊值小于後面的陰影模糊值，那麼前面的顯示在後面之上，如果前面陰影的模糊值大于後面的陰影模糊值，那麼前面的陰影将遮住後面的陰影效果。如下面例子：
執行個體效果再次證明：左圖中我們可以看見紅色陰影在蘭色陰影之上并沒有遮蓋藍色陰影，因為我們紅色的陰影模糊值隻有5px，比藍色的15px模糊值要小；而右圖中我們隻能看到紅色的陰影，那是因為我們第一個紅色陰影的模糊半徑大于第二個蘭色的模糊半徑，是以紅色的陰影把藍色的陰影遮蓋住了。這一點大家可記住了。
效果二：四邊具有相同的陰影效果（隻設定陰影模糊半徑和陰影顔色）
我們在這裡設定的是HEX值，我們也可以應用css3的rgba值給box-shadow的陰影顔色上，這樣的好處是，box-shadow陰影色多了一個alpha透明值 ，如下面的執行個體：
對比上面兩個例子，前一個例子我們沒有應用透明值，而後面一個例子我們應用了0.5的透明值，相比之下後面的陰影是不是更淺。當然在實踐應用中您可以根據自己的需求進行設定。
效果三：四邊具有相同的陰影（隻設定陰影擴充半徑和陰影顔色）
從效果中大家想想這種效果是不是跟我們在元素中的boder: 1px solid red;屬性産生的效果很相似的呀。對的，box-shadow不單可以制作出陰影的效果，我們還可以利用其擴充半徑這個值，來給對象制作出類似于邊框的樣式。下面我們來看一個對比的執行個體：
實際上利用box-shadow來制作邊框，隻能說看上去像邊框，但實質其并非邊框，他和border還是有本質上的差別。從上面的效果圖中我們明顯的可以看出左邊的box要比右邊的box低那麼1px的，這樣一來随着其擴充半徑值越大，兩者之間的相差就更大，如：
我們接着來看demo12和demo13兩個demo在firebug下的layout圖：
結合上圖兩者在firebug下的layout圖，更證明了我們前面所講的陰影不會影響頁面的任何布局：demo12的邊框被計算了寬度，但demo13的陰影浏覽器卻忽略不計，是以借住這個特點，我們陰影所模拟的邊框理可以自由的使用，但必須要注意其層級關系。
<a href="http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html" target="_blank">CSS3 Media Queries 實作響應式設計</a>
<a href="http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html" target="_blank">CSS3 入門教程系列：CSS3 圓角詳解</a>
<a href="http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html" target="_blank">CSS3 入門教程系列：CSS3 陰影詳解</a>
<a href="http://www.cnblogs.com/lhb25/archive/2013/01/29/css3-rgba-tutorials.html" target="_blank">CSS3 入門教程系列：CSS3 RGBA詳解</a>
<a href="http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html" target="_blank">CSS3 經典教程系列：CSS3 線性漸變</a>
歡迎任何形式的轉載，但請務必注明出處。