邊框陰影，是一種很常見的特效。在 學習網的在線工具欄目中，我們都能看到：
以前在CSS2.1時，如果想要為元素添加邊框陰影（就像上圖那樣），也是只能通過背景圖片的方法來實現。
在CSS3中，我們可以使用box-shadow屬性輕松地為元素添加陰影效果。
語法：
box-shadow：x-shadow y-shadow blur spread color inset;
說明：
（1）x-shadow：設置水平陰影的位置（X軸），可以使用負值；
（2）y-shadow：設置垂直陰影的位置（y軸），可以使用負值；
（3）blur：設置陰影模糊半徑；
（4）spread：擴展半徑，設置陰影的尺寸；
（5）color：設置陰影的顏色；
（6）inset：這個參數默認不設置。默認情況下為外陰影，inset表示內陰影。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:5px 5px 8px red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
我們都知道box-shadow屬性語法如下：
box-shadow：x-shadow y-shadow blur spread color inset;
接下來，我們詳細對這幾個屬性值進行講解。
水平陰影位置x-shadow和垂直陰影位置y-shadow的屬性取值，單位可以是px、em或百分比等，允許負值。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:-5px -5px 8px red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家跟舉例1對比一下，看看x-shadow和y-shadow設置為正值與負值方向有什麼不同。
模糊半徑blur用於設置邊框陰影半徑大小。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:5px 5px 0px red;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
$("#range").change(function () {
var num = $(this).val();
$("#value").text(num);
$("#div1").css("box-shadow", "5px 5px " + num + "px red");
});
})
</script>
</head>
<body>
<input id="range" type="range" min="0" max="25" value="0"/>
<span id="value">0</span>
<div id="div1"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡我做了一個小小的程序，當大家拖動滑動條的時候，可以動態地觀察陰影半徑變化形態。至於程序如何實現的，請關注我們未來上線的jQuery入門教程，在此不再說明，大家只需要觀察陰影半徑變化即可。
陰影尺寸spread用於設置陰影的大小。這個參數可選，缺省時值為0。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:5px 5px 0px red;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
$("#range").change(function () {
var num = $(this).val();
$("#value").text(num);
$("#div1").css("box-shadow", "5px 5px " + num + "px red");
});
})
</script>
</head>
<body>
<input id="range" type="range" min="0" max="25" value="0"/>
<span id="value">0</span>
<div id="div1"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
對於參數spread，用於改變陰影的大小。如果值為正，則整個陰影都延展擴大；如果值為負，則整個陰影縮小。
box-shadow屬性最後一個參數用於設置陰影是否是內陰影，還是外陰影。
取值有2種：
（1）outset：默認值，外陰影；
（2）inset：內陰影；
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
div
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
}
#div1{box-shadow:0 0 12px red;}
#div2{box-shadow:0 0 12px red inset;}
</style>
</head>
<body>
<div id="div1">外陰影</div>
<div id="div2">內陰影</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
默認情況下，邊框陰影是外陰影效果，設置最後一個屬性值為inset時，邊框陰影為內陰影效果。
這裡注意一個技巧：當水平陰影位置x-shadow和垂直陰影位置y-shadow都為0時，陰影都向外發散或者都向內發散。很多人想要這種效果，之前也不知道怎麼做！
box-shadow屬性可以為邊框的4條邊的設置獨立樣式。其中，每條邊的陰影屬性值之間用英文逗號隔開即可。
語法：
box-shadow: 左邊陰影,頂部陰影,底部陰影,右邊陰影;
說明：
注意偏移半徑的正負。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow屬性</title>
<style type="text/css">
#div1
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green;
}
</style>
</head>
<body>
<div id="div1">外陰影</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
仔細觀察水平陰影位置x-shadow和垂直陰影位置y-shadow這兩個取值是如何設置的。
這一節的內容有點多，但卻是非常值得你花時間去消化。更何況這些內容，俺已經幫你系統化了。想起我當初學的時候，還得翻閱大量資料。雖然這些東西唾手可得，還望珍惜！