3.5 CSS3盒子陰影屬性
box-shadow用來定義元素的盒子陰影。
3.5.1 box-shadow屬性的語法及參數
語法
E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:none inset x-offset y-offset blur-radius spread-radius color}
換句說：
對象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色}
取值：
box-shadow屬性至多有7個參數設置，他們分別取值：
none：默認值，元素沒有任何陰影效果。
陰影類型（
inset）：此參數是一個可選值，如果不設值，其默認的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影，也就是說設置陰影類型為“inset”時，其投影就是內陰影；X-offset:是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊；
Y-offset:是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑（
blur-radius）：此參數是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；陰影擴展半徑（
spread-radius）：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小陰影顏色（
color）：此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
3.5.2 box-shadow屬性使用方法
1、單邊陰影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow 設置單邊陰影效果</title>
<style>
.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 blur;
}
.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>
添加一個半徑模糊
.top{
box-shadow: 0 -2px 5px red;
}
.right{
box-shadow: 2px 0 5px green;
}
.bottom{
box-shadow: 0 2px 5px blue;
}
.left{
box-shadow: -2px 0 5px orange;
}
調整陰影位移
.top{
box-shadow: 0 -2px 5px -3px red;
}
.right{
box-shadow: 2px 0 5px -3px green;
}
.bottom{
box-shadow: 0 2px 5px -3px blue;
}
.left{
box-shadow: -2px 0 5px -3px orange;
}
2、四邊相同陰影效果
（1）只設置陰影模糊半徑和陰影顏色
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
box-shadow: 0 0 10px #06c;
}
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
box-shadow: 0 0 10px 10px #06c;
}
（2）只設置擴展半徑和陰影顏色
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
box-shadow: 0 0 0 10px #06c; //效果跟直接設置“10px”實線邊框一樣
}
box-shadow 并不是盒模型中的元素，不會計算到內容寬度。
3、內陰影
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
box-shadow: inset 3px 3px 10px #06c;
}
不過box-shadow 的內陰影使用在圖片“img”元素上是沒有任何效果的。
可以在圖片外層添加一個容器，將box-shadow的內陰影使用在該容器上，這樣“img”就具備了內陰影效果。
4、多層陰影
其實box-shadow可以多層陰影同事使用，每層陰影之間使用逗號“,”隔開。而每層陰影的使用方法都和前面一樣。
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 100px;
box-shadow: -5px 0 5px red,
0 5px 5px blue,
5px 0 5px green,
0 -5px 5px orange;
}
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 100px;
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.5.3 瀏覽器兼容性
主流瀏覽器都支持，IE9+支持。
3.5.4 box-shadow 屬性的優勢
從實現盒子陰影來說，box-shadow是最方便的，不管是使用背景圖片，還是使用濾鏡或者說JS腳本，都無法和box-shadow屬性相比。
-
box-shadow具有多個屬性參數可選，能制作出圓潤平滑的陰影效果。 - 代碼維護方便，可以隨時更改參數來實現效果的更新。
3.5.5 實戰體檢 ：制作3D搜索表單
略 （P130-133）
3.5.6 本章小結
本章主要介紹CSS3新增的邊框屬性，首先從CSS的border屬性著手切入，分別介紹了CSS3新增邊框特性，border-color、border-image、border-radius以及box-shadow。詳細介紹了每個特性的語法規則，并且結合一些簡單的案例以圖解的方式介紹了這些特性的具體使用方法以及在IE下相應的兼容和處理方法。
