box-shadow是CSS3的特性，可以通過這個特性指定陰影的位移距離、顔色、模糊程度、擴散程度，同樣也支援内陰影，進而打造出陰影或者光暈的效果。
今天我在寫一個開關（switch）的純CSS實作時，發現很多地方都用到了box-shadow，然後就定下了今天的博文内容：P~
标準文法：
{box-shadow: inset x-offset y-offset blur-radius spread-radius color}
相對應的也就是：
{box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充半徑 陰影顔色}
box-shadow屬性可以向圖層添加一個或多個陰影，如果需要添加多個陰影，則需要使用逗号“,”分開。
說明
- 一共有六個特性值。值與值之間需要以至少一個空格進行間隔。
- inset：該值為可選值，如果不設值的話，預設的投影方式是外陰影，如果設定陰影類型為“inset”，則其投影方式為内陰影。
- x-offset：指的是陰影水準偏移量，該值可以是負的也可以是正的，如果為正值，則陰影在元素的右邊；如果為負值，則陰影在元素的左邊。該值為必要值。
- y-offset：指的是陰影垂直偏移量，該值可以是負的也可以是正的，如果為正值，則陰影在元素的下面；如果為負值，則陰影在元素的上面。該值為必要值。
- blur-radius：該值為可選值，其值隻能為正值，設定值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊。
- spread-radius：該值為可選值，該值可以是負的也可以是正的，如果為正值，則整個陰影都延展；如果為負值，則縮小。
- color：該值為可選值，如果不設定任何顔色，則浏覽器會取預設值。
運用box-shadow，讓我們可以脫離PS繁瑣的一張一張地來制作圖檔，且這樣産生的陰影不會對排版産生影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水準垂直居中</title>
<style>
.wrap {
width: px;
height: px;
border: px solid #000;
}
.inner {
width: px;
height: px;
margin: px auto;
background: #006400;
box-shadow: px px #000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
box-shadow實踐
</body>
</html>
浏覽器相容性
浏覽器相容性想必大家都會很關心，畢竟不相容的，你寫再多也隻不過是多餘的代碼而已。
為了能相容支援的各大浏覽器的書寫方式：
//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軸偏移量 陰影模糊半徑 陰影擴充半徑 陰影顔色;
陰影模糊
blur-radius值越大，陰影越模糊。
div {
box-shadow: px #ccc;
}
多層次陰影
寫法：
.inner {
box-shadow: inset px px #ADFF2F, px #98FB98, px #228B22;
}
模拟多邊框
實作效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水準垂直居中</title>
<style>
div {
width: px;
height: px;
background: #000;
box-shadow: px #fff, px green, px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
當給同一個元素使用多個陰影屬性時，需要注意他的順序，最先寫的陰影将顯示在最頂層。
單邊效果
使用多層次的box-shadow，以及x-offset和y-offset的正負值來實作單邊效果。
實作效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水準垂直居中</title>
<style>
div {
width: px;
height: px;
background: #000;
box-shadow: px gray, -px red, px green, -px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
打造立體感
div {
color: #fff;
background-color: #BA55D3;
font-family: "Arial";
font-weight: ;
font-size: em;
display: block;
padding: px;
border-radius: px;
box-shadow: px px px #9932CC, px px px rgba(, , , .);
margin: px auto;
width: px;
text-align: center;
}
内陰影效果
實作效果如下：
div {
box-shadow: inset px #000;
}
内陰影增加spread值，加強凹陷的真實感。
div {
box-shadow: inset px px #000;
}
可能寫到的情況還不是非常全面，還是希望這篇文章對大家有所幫助：）。歡迎多多交流~文中若有不正之處，歡迎指正。