box-shadow基礎
各項值的解釋
offset-x：必需丑搔，取值正負都可厦瓢。offset-x水平陰影的位置。
offset-y：必需啤月，取值正負都可煮仇。offset-y垂直陰影的位置。
blur:可選谎仲，只能取正值浙垫。blur-radius陰影模糊半徑，0即無模糊效果，值越大陰影邊緣越模糊夹姥。
spread：可選杉武，取值正負都可。spread代表陰影的周長向四周擴展的尺寸辙售，正值轻抱，陰影擴大，負值陰影縮小旦部。
color:可選祈搜。陰影的顏色。如果不設置士八，瀏覽器會取默認顏色容燕，通常是黑色，但各瀏覽器默認顏色有差異曹铃，建議不要省略缰趋∨跎迹可以是rgb(250,0,0)陕见，也可以是有透明值的rgba(250,0,0,0.5)。
inset:可選味抖。關鍵字评甜，將外部投影(默認outset)改為內部投影。inset 陰影在背景之上仔涩，內容之下忍坷。
效果解釋
假如我寫一個聲明：box-shadow: 120px 80px 40px 20px #00fcfc，得到這樣的效果：
box-shadow的不足之處
box-shadow是IE9出現(xiàn)的屬性熔脂，作為老前輩佩研，雖然很多場合挺好用的，但是它也有不足：
- 模糊比較生硬
- 無法智能陰影
所以今天引出另一個好用的CSS濾鏡：drop-shadow霞揉。
drop-shadow濾鏡是什么
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()
支持度：Edge 13以上
這個濾鏡也是一種陰影效果旬薯，但是非常新。
與box-shadow的區(qū)別
- drop-shadow相對比較柔和适秩。相同屬性前提下绊序，效果見下：
box-shadow效果：
drop-shadow效果：
- drop-shadow能智能識別容器內容
比如我從前寫的一個氣泡效果（http://www.reibang.com/p/c17b1f4989a0），現(xiàn)在秽荞，前兩種方式都是box-shadow骤公，只不過箭頭實現(xiàn)方式有所區(qū)別，第三種是drop-shadow扬跋。
第一種箭頭幾乎看不清阶捆，第二種又很生硬，第三種就很自然，而且drop-shadow強大之處就是智能識別元素邊緣洒试，所以drop-shadow無需在偽元素上聲明刊咳，而box-shadow必須在偽元素上聲明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bm-overlay1 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay1::after {
position: absolute;
content: "";
transform: rotate(45deg);
width: 16px;
height: 16px;
font-size: 0;
position: absolute;
background-color: #fff;
box-shadow: 5px 5px 5px -5px #ccc;
bottom: -8px;
left: 113.7px;
}
.bm-overlay2 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay2::before {
position: absolute;
content: "";
width: 0;
height: 0;
font-size: 0;
position: absolute;
transform: rotate(45deg);
border-width: 8px;
border-style: solid dashed dashed;
border-color: transparent #fff #fff transparent;
box-shadow: 1px 1px 1px #ccc;
bottom: -8px;
left: 113.7px;
}
.bm-overlay3 {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
filter: drop-shadow(0 1px 2px #ccc);
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
}
.bm-overlay3::before {
position: absolute;
content: "";
width: 0;
height: 0;
font-size: 0;
position: absolute;
transform: rotate(45deg);
border-width: 8px;
border-style: solid dashed dashed;
border-color: transparent #fff #fff transparent;
bottom: -8px;
left: 113.7px;
}
</style>
</head>
<body>
<div class="bm-overlay1" style="margin-bottom: 50px;"></div>
<div class="bm-overlay2" style="margin-bottom: 50px;"></div>
<div class="bm-overlay3" style="margin-bottom: 50px;"></div>
</body>
</html>
- box-shadow有內陰影儡司，也可以疊加陰影
drop-shadow都做不到娱挨。
結論
在支持drop-shadow的瀏覽器上，可以視情況優(yōu)先選擇drop-shadow捕犬，效果通常好于box-shadow跷坝。當然，如果你是box-shadow高手碉碉，另當別論柴钻。
