要使用標(biāo)準(zhǔn)的CSS3實(shí)現(xiàn)某元素的投影效果壹甥，有兩個套路壶熏，第一個就是使用常見的box-shadow, 第二個就是使用CSS3的filter陰影濾鏡drop-shadow，那這兩個陰影實(shí)現(xiàn)有什么具體的差異呢溯职？
一帽哑、兼容性不一
css3 box-shadow從IE9瀏覽器開始就支持了，而filter中的drop-shadowIE13才開始支持僻族，移動端Android4.4才開始支持屡谐；
二愕掏、參數(shù)值一樣，表現(xiàn)效果有差異
filter中的drop-shadow語法如下：
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
例如：
filter:drop-shadow(5px 5px 10px black)
box-shadow: 5px 5px 10px black;
同樣的參數(shù)值剑梳，但是box-shadow的陰影距離更小，色值要更深挠锥；
三侨赡、drop-shadow沒有內(nèi)陰影粱侣，不能陰影疊加
box-shadow支持inset內(nèi)陰影齐婴，如：
box-shadow: inset 5px 5px 10px black;
但是，drop-shadow卻沒有颠悬。
box-shadow有個超屌的特性毡证，就是陰影可以任意累加料睛，因此摇邦，理論上我們可以使用box-shadow生成任意的圖片。
filter中的drop-shadow就不可以居扒。但是丑慎，drop-shadow有一個很厲害的特性立哑，drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影而已诈茧。
四捂掰、陰影 vs 盒陰影
分別應(yīng)用box-shadow和drop-shadow濾鏡：
border: 10px dashed #beceeb;
box-shadow: 5px 5px 10px black;
border: 10px dashed #beceeb;
filter: drop-shadow(5px 5px 10px black);
結(jié)果如圖：
box-shadow顧名思意“盒陰影”，只是盒子的陰影塞俱；但是drop-shadow就符合真實(shí)世界的投影吏垮，非透明的顏色，我就有投影唯蝶；透明部分遗嗽，光線穿過痹换，沒投影，而什么盒子不盒子的匙姜，跟我沒有任何關(guān)系锤躁。
五、drop-shadow實(shí)際應(yīng)用
經(jīng)常我們實(shí)現(xiàn)帶有箭頭指向的浮層面板的時候郭计，考慮到兼容性昭伸，三角基本上都是使用border繪制的澎迎，沒法使用 box-shadow，但是灵份，矩形部分設(shè)計師希望是有陰影的哮洽，于是，就會出現(xiàn)下圖所示的情況：
箭頭沒有陰影莺葫，蒙混過關(guān)枪眉。
現(xiàn)在，有了drop-shadow堡纬，陰影就真的變成了陰影了萨脑；
接下來渤早，我們實(shí)現(xiàn)filter:drop-shadow實(shí)現(xiàn)尖角帶陰影的提示面板：
HTML：
<div class="box box-shadow>
<i class="cor"></i>
box-shadow
</div>
<div class="box drop-shadow">
<i class="cor"></i>
filter: drop-shadow
</div>
CSS：
.box {
margin: 40px; padding: 50px;
background-color: #fff;
position: relative;
font-size: 24px;
}
.cor {
position: absolute;
left: -40px;
widtd: 0; height: 0;
overflow: hidden;
border: 20px solid transparent;
border-right-color: #fff;
}
.box-shadow {
box-shadow: 5px 5px 10px black;
}
.drop-shadow {
-webkit-filter: drop-shadow(5px 5px 10px black);
}
如圖：
低版本IE瀏覽器下鹊杖，其實(shí)也有Shadow濾鏡骂蓖，不過是IE的私有濾鏡川尖。如果想要實(shí)現(xiàn)兼容IE9+的投影效果，估計要借助SVG來實(shí)現(xiàn)了被芳。
總而言之，雖然drop-shadow濾鏡亮點(diǎn)單一馍悟，但是這個亮點(diǎn)可以照亮整個北半球畔濒。
原文地址：mp.weixin.qq.com/s
