<b>3.5 css3盒子陰影屬性</b>
box-shadow也是css3新增的一個重要屬性，用來定義元素的盒子陰影。本節主要介紹css3的box-shadow的屬性以及如何使用。
3.5.1 box-shadow屬性的文法及參數
在具體學習box-shadow使用方法之前，我們必須先知道box-shadow使用的文法規則。
box-shadow:none | [ <length>
<length> <length>?<length>? || <color> ] [ ,
<length> <length> <length>? <length>?|| <color>
]+
上面的文法規則可以簡寫如下：
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius
color], [inset x-offset y-offset
blur-radius spread-radius color]
box-shadow屬性可以使用一個或多個投影，如果使用多個投影時必須使用逗号“,”隔開。
其實box-shadow屬性很簡單，可以為其設定以下參數。
none：預設值，元素沒有任何陰影效果。
inset：陰影類型，可選值。如果不設定，其預設的投影方式是外陰影；如果取其唯一值“inset”，就是給元素設定内陰影。
x-offset：陰影水準偏移量，其值可以是正負值。如果取正值，則陰影在元素的右邊，反之取負值，陰影在元素的左邊。
y-offset：陰影垂直偏移量，其值可以是正負值。如果取正值，則陰影在元素的底部，反之取負值，陰影在元素的頂部。
blur-radius：陰影模糊半徑，可選參數。其值隻能是正值，如果取值為“0”時，表示陰影不具有模糊效果，如果取值越大，陰影的邊緣就越模糊。
spread-radius：陰影擴充半徑，可選參數。其值可以是正負值，如果取值為正值，則整個陰影都延展擴大，反之取值為負值，則整個陰影都縮小。
color：陰影顔色，可選參數，如果不設定任何顔色時，浏覽器會取預設色，但各浏覽器預設色不一樣，特别是在webkit核心下的浏覽器将無色，也就是透明，建議不要省略這個參數。
3.5.2 box-shadow屬性使用方法
和psd軟體制作圖檔相比，box-shadow修改元素的陰影效果要友善得多，因為box-shadow可以修改六個參數，得到不同的效果。下面結合一些簡單的案例來對box-shadow屬性進行示範說明。
1．單邊陰影效果
定義元素的單邊陰影效果和調協border的單邊邊框顔色是相似的，例如：
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>box-shadow設定單邊陰影效果</title>
<style type="text/css">
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: 0 -2px 0 red;
.right {
box-shadow: 2px 0 0 green;
.bottom {
box-shadow: 0 2px 0 blue;
.left {
box-shadow: -2px 0 0 orange;
</style>
</head>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>
效果如圖3-38所示。
這個案例中，使用box-shadow給元素設定了頂邊、右邊、底邊和左邊的單邊陰影效果。主要通過box-shadow的水準和垂直陰影的偏移量來實作，其中x-offset為正值時，生成右邊陰影，反之為負值時，生成左邊陰影；y-offset為正值時，生成底部陰影，反之為負值時生成頂部陰影。此例中是一個單邊實影投影效果（陰影模糊半徑為0），但是如果陰影的模糊半徑不是0，上面的方法還能不能實作單邊陰影效果呢？不急着來回答，在上面的執行個體中添加一個模糊半徑，例如：
box-shadow: 0 -2px 5px red;
box-shadow: 2px 0 5px green;
box-shadow: 0 2px 5px blue;
box-shadow: -2px 0 5px orange;
圖3-39說明，這個效果并不是理想的單邊陰影效果，當box-shadow添加了5px陰影模糊半徑後，陰影不再是實影投影，陰影清晰度向外擴散，更具陰影的效果。但造成了另一個問題，給元素其他三個邊加上淡淡的陰影效果，可這并不是設計需要的效果。
那究竟要怎麼做呢？此時，box-shadow屬性中的陰影擴充半徑（spread-radius）會是一個很關鍵的屬性，要實作單邊陰影效果，必須配上這個屬性（除單邊實影之外）。
圖3-39 有模糊值的單邊陰影效果
box-shadow: 0 -4px 5px -3px red;
box-shadow: 4px 0 5px -3px green;
box-shadow: 0 4px 5px -3px blue;
.left {
box-shadow: -4px 0 5px -3px orange;
上面的代碼調整了陰影的位移量，新增了box-shadow的擴充半徑，最終效果如圖3-40所示。
注
意 各浏覽器下顯示效果略有細節差别。
2．四邊相同陰影效果
box-shadow給元素設定相同的四邊陰影效果，其實分為兩種，在這裡先看第一種。
（1）隻設定陰影模糊半徑和陰影顔色
隻設定陰影模糊半徑和陰影顔色。例如：
.box-shadow{
border-radius: 10px;
box-shadow: 0 0 10px #06c;
效果如圖3-41所示。
在這個示例基礎上，添加box-shadow擴充半徑還可以控制陰影深度，如果取正值将加深陰影的深度，如果取負值可以向内壓縮陰影，直到擴充半徑等于模糊半徑時，陰影會完全消失。例如：
width: 200px;
box-shadow: 0 0 10px 10px #06c;
效果如圖3-42所示。
接下來，将擴充半徑改成“-10px”，
此時将看不到任何陰影效果。
box-shadow: 0 0 10px -10px #06c;
效果如圖3-43所示。
（2）隻設定擴充半徑和陰影顔色
另外一種設定元素四邊相同陰影效果，是設定擴充半徑和陰影顔色，先來看一個簡單的示例。
圖3-43 無陰影效果
box-shadow: 0 0 0 10px #06c;
效果如圖3-44所示。
圖3-44 四邊相同陰影效果
從圖3-44可知道，box-shadow制作的陰影效果和元素設定“10px”實線邊框一樣。
border:10px solid #06c;
如此一來，可以利用box-shadow擴充半徑制作類似于邊框的效果，但實質上并非邊框，因為box-shadow并不是盒模型中的元素，不會計算到内容寬度。具體來看一個box-shadow與border的對比示例。
<title>border與box-shadow</title>
.box {
text-align: center;
line-height: 100px;
float: left;
margin: 30px;
}
.border{
border: 10px solid red;
box-shadow: 0 0 0 10px red;
<div class="box border">border</div>
<div class="box box-shadow">box-shadow</div>
效果如圖3-45所示。
圖3-45 border與box-shadow制作邊框效果對比
圖3-45證明了box-shadow不會影響頁面的任何布局。div.border元素的邊框被計算了寬度，但div.box-shadow的陰影被浏覽器忽略不計，是以借助box-shadow屬性的這個特性，border-shadow用來模拟元素的邊框效果可以自由地使用，但必須注意其層級關系。
w3c标準規範中描述了box-shadow的工作方式，直覺告訴我們box-shadow在元素盒模型中的層次關系，如圖3-46所示。
圖3-46告訴我們很多資訊，比如說border-radius圓角、陰影擴充、陰影模糊以及padding是如何影響對象的陰影的。非零值的border-radius會以相同的作用影響陰影的外形，但border-image不會影響對象陰影的任何外形；對象陰影同盒模型的層次一樣，外陰影會在對象背景之上，内陰影會在邊框之下，背景之上。是以整個層級就是：邊框在内陰影之上，内陰影在背景圖檔之上，背景圖檔在背景色之上，背景色在外陰影之上。
3．内陰影
前幾種都是外陰影的使用方法，其實使用inset屬性值可以改變元素的陰影類型，将元素的預設外陰影重置為内陰影類型。例如：
box-shadow: inset 3px 3px 10px #06c;
效果如圖3-47所示。
圖3-47 box-shadow制作内陰影
不過box-shadow的内陰影使用在圖檔“img”元素上是沒有任何效果的，例如：
<title>圖檔内陰影效果</title>
img {
box-shadow: inset 5px 5px 10px #06c;
<img src="border.jpg" alt=""
width="200" />
效果如圖3-48所示。
圖3-48 box-shadow在img上的内陰影無效果
圖3-48的效果再次證明了box-shadow的inset内陰影直接運用在img上沒有任何效果，但在實際web項目中難免在圖檔上添加内陰影的效果。記得将border-radius運用在img上時，webkit核心浏覽器也無效果，最後在img外添加一個容器标簽，并将img轉換成外容器的背景圖檔，将border-radius運用在外容器上才有圓角效果的。借助這個思路，也在img标簽外添加一個容器，例如“div”标簽，但這裡不将img轉換成div标簽的背景，隻是将box-shadow的内陰影使用在div标簽上，例如：
display: inline-block;/*這個很重要*/
position:relative;/*這個很重要*/
z-index: -1;/*這個很重要*/
vertical-align: top;
<div class="box-shadow">
</div>
此時img就具有内陰影效果了，如圖3-49所示。
圖3-49 圖檔内陰影效果
也可以像border-radius制作圖檔圓角的方法，将圖檔轉為容器div的背景圖，也能實作圖3-49的效果，但是會使用javascript腳本。對于不懂腳本的web設計師來說，還是蠻頭痛的。具體的操作方法可以參考border-radius一節。
4．多層陰影
前幾種都是單陰影效果的使用，其實box-shadow可以多層陰影同時使用，每層陰影之間使用逗号“，”隔開。而每層陰影的使用方法都和前面一樣，例如：
box-shadow: -5px 0 5px red, 0 5px 5px blue, 5px 0 5px green, 0 -5px 5px
orange;
效果如圖3-50所示。
制作多層陰影效果時，不設定模糊半徑，隻設定擴充半徑，并配合多個陰影顔色，還可以制作多色邊框效果，代替border-color屬性制作多色邊框效果，例如：
width:
200px;
box-shadow: 0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px orange,
0 0 0 20px #06c,
0 0 0 24px lime;
}
效果如圖3-51所示。
使用box-shadow制作多色邊框效果，需要注意模仿border的寬度。前面介紹過box-shadow的工作模式，在計算寬度時需要減去前面陰影的值，才是顯示的顔色寬度。
在使用多層級box-shadow時，還需要特别注意陰影的順序，最先寫的陰影将顯示在最頂層，如上面的示例，先定義1px紅色陰影，再定義5px藍色陰影，接着是8px綠色陰影，以此類推。顯示結果就是紅色在藍色上面，藍色在綠色上面，綠色在黃色上面，以此類推。但是，如果最前面的陰影太大，頂層的陰影就會遮蓋底部的陰影。例如，上例中将最底層的24px的lime陰影放到最前面，效果就完全不一樣了。
box-shadow: 0 0 0 24px lime,
0 0 0 1px red,
0 0 0 20px #06c;
此時後面的陰影都被第一個陰影遮蓋了，如圖3-52所示。
圖3-52 被遮蓋的陰影效果
3.5.3 浏覽器相容性
目前box-shadow屬性得到很好的支援，ie 8及以前版本的浏覽器不支援box-shadow屬性。在現代浏覽器的新版本中無須加各浏覽器的字首，不過要向前相容，firefox 3.5～3.6下需要添加“-moz-”，chrome 4～9和safari 3.1～5.0浏覽器中添加“-webkit”。借助相容方式，各主流浏覽器對box-shadow屬性的支援情況如表3-7所示。
表3-7 box-shadow的浏覽器相容表
屬性名
box-shadow 9
+√ 3.5 +√ 2.0 +√ 10.5 +√ 4.0 +√
雖然ie低版本不支援這個屬性，但目前box-shadow在實際項目中運用越來越普遍。因為box-shadow實作陰影比使用背景圖檔的方法友善，同時能為web前端設計師減少很多時間，維護也友善。
要相容ie低版本，可以使用ie 的濾鏡來模拟實作。
filter:
progid:dximagetransform.microsoft.shadow(color='顔色值',
direction=陰影角度（數值）, strength=陰影半徑（數值）);
其中“dropshadow”（盒狀陰影）和“shadow”（陰影）兩個濾鏡正是為實作陰影而設，另外“glow”（發光）濾鏡則用于在盒容器四周實作發光陰影。但這些濾鏡可設定的參數并不像box-shadow屬性那樣提供諸多的自定義參數，我不認為這些濾鏡能夠實作前面示例中所需的效果。當然除了ie濾鏡之外，同樣可以采用前面說的pie和ie -css3腳本來實作ie 下的陰影效果。
提
示 現代浏覽器使用box-shadow來制作陰影，而不支援box-shadow的浏覽器讓它不顯示陰影，如果非要完美相容，不妨考慮在不支援box-shadow的浏覽器中使用背景圖檔來模仿陰影。
<b>3.5.4 box-shadow屬性的優勢</b>
從實作盒子陰影來說，box-shadow是最友善的，不管是使用背景圖檔，還是使用濾鏡或者說javascript腳本，都無法與box-shadow屬性相比。
box-shadow具有多個屬性參數可選，能制作出圓潤平滑的陰影效果。
代碼維護友善，可以随時更改參數來實作效果的更新。
3.5.5 實戰體驗：制作3d搜尋表單
為了友善讀者了解，接下來介紹一個box-shadow案例——制作3d搜尋表單。
在這個案例中，除了使用box-shadow之外，還使用border-radius制作圓角，并涉及text-shadow制作文本陰影，以及gradient制作漸變背景圖檔，關于這兩項技術，請參閱後面章節。整個案例的效果如圖3-53所示。
圖3-53 box-shadow制作3d搜尋表單
從box-shadow多層級陰影特性出發，給表單容器設定多個同方向陰影效果，并且配合圓角屬性border-radius來描繪圓角線框，同時使用漸變屬性制作漸變的背景圖檔等，結合css3的多種效果，進而建構出這個3d搜尋表單。
1．建構3d表單的結構
整個表單結構很簡單，代碼如下所示。
<!—表單結構-->
<form id="formwrapper">
<div class="formfiled clearfix">
<!-- 搜尋表單的輸入框 -->
<input type="text"
required="" placeholder="search for css3, html5, jquery
..." class="search">
<!-- 搜尋按鈕 -->
<input type="submit"
class="btn submit" value="go">
</div>
</form>
整個結構使用一個“form”元素，并且應用一個“div.formfiled”容器來包裹“input.search”的輸入框和一個搜尋按鈕“input.btn”，如圖3-54所示。
圖3-54 搜尋表單結構
2．設計表單容器的3d立體效果
使用box-shadow的多層陰影特性給表單元素設計3d立體效果，樣式代碼如下所示。
#formwrapper {
width: 450px;/*設定搜尋表單的寬度*/
padding: 8px;
overflow: hidden;/*清除浮動*/
/*設定表單的邊框效果*/
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
/*最為關鍵的代碼，設定表單3d立體效果*/
box-shadow: 0 3px 3px rgba(255,255,255,.1),
0 3px 0 #bbb, 0 4px 0 #aaa,
0 5px 5px #444;
/*設定圓角效果*/
/*使用漸變制作表單的漸變背景圖檔*/
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top,
left bottom,
from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
3．制作表單輸入框的搜尋按鈕效果
接下來使用box-shadow制作3d立體效果，為了使表單更漂亮，将輸入框和搜尋按鈕進行美化，代碼如下所示。
/*輸入框樣式效果*/
#formwrapper .search {
width: 330px;
height: 20px;
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet ms', 'tahoma';
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;/*多陰影效果*/
border-radius: 3px;
/*輸入框得到焦點時樣式*/
#formwrapper .search:focus {
outline: 0;
border-color: #aaa;
box-shadow: 0 1px 1px #bbb inset;
#formwrapper .search::-webkit-input-placeholder,
#formwrapper .search:-moz-placeholder,
#formwrapper .search:-ms-input-placeholder {
color: #999;
font-weight: normal;
/*搜尋按鈕效果*/
#formwrapper .btn {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px arial, helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
left bottom,
from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
/*按鈕懸浮狀态和焦點狀态下效果*/
#formwrapper .btn:hover,
#formwrapper .btn:focus {
background-color: #31b2c3;
left bottom, from(#0483a0),
to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
/*按鈕點選時效果*/
#formwrapper .btn:active {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
/*firefox下按鈕去除焦點線*/
#formwrapper::-moz-focus-inner {
border: 0;
制作的3d立體搜尋表單效果如圖3-53所示。當然這隻是一個簡單的案例，box-shadow還可以制作更多的效果，例如雙層邊框效果、發光效果、立體按鈕等。大家還可以發揮自己的想象力，創造出更多的有創意的、有吸引力的ui效果。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)