filter:drop-shadow有方向的陰影使用說明
發(fā)布時(shí)間：2012-12-12 17:05:34 作者：佚名 
我要評(píng)論
我要評(píng)論前些天在做一個(gè)項(xiàng)目的時(shí)候，用到了陰影，陰影是個(gè)方向都有的，今天看到bricss說到filter:drop-shadow頓時(shí)豁然開朗，現(xiàn)整理了，需要的朋友可以參考下
前些天在做一個(gè)項(xiàng)目的時(shí)候，用到了陰影，陰影是個(gè)方向都有的，于是寫了一大坨box-shadow來實(shí)現(xiàn)，然后今天看到bricss說到filter:drop-shadow，豁然開朗。
具體的實(shí)現(xiàn)不用不細(xì)講了，直接看代碼：
box-shadow方案：
.box-shadow {
box-shadow: rgba(0,0,0,.5) 0 1px 5px;
}
drop-shadow濾鏡方案：
.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}
效果對(duì)比：
關(guān)于drop-shadow這個(gè)濾鏡：
不了解filter的同學(xué)請(qǐng)?jiān)L問：-webkit-filter是神馬？
chrome從21版本開始支持（現(xiàn)在主流版本是22），Safari 6和ios 6中Safari也都支持
firefox、Opera、ie繼續(xù)用box-shadow吧
filter規(guī)范現(xiàn)在由webkit和adobe在推，firefox在跟進(jìn)，ie10也支持一點(diǎn)點(diǎn)了，所以在webkit上，可以實(shí)現(xiàn)更好的效果，為什么不用呢？
具體的實(shí)現(xiàn)不用不細(xì)講了，直接看代碼：
box-shadow方案：
復(fù)制代碼
代碼如下:.box-shadow {
box-shadow: rgba(0,0,0,.5) 0 1px 5px;
}
drop-shadow濾鏡方案：
復(fù)制代碼
代碼如下:.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}
效果對(duì)比：
關(guān)于drop-shadow這個(gè)濾鏡：
不了解filter的同學(xué)請(qǐng)?jiān)L問：-webkit-filter是神馬？
chrome從21版本開始支持（現(xiàn)在主流版本是22），Safari 6和ios 6中Safari也都支持
firefox、Opera、ie繼續(xù)用box-shadow吧
filter規(guī)范現(xiàn)在由webkit和adobe在推，firefox在跟進(jìn)，ie10也支持一點(diǎn)點(diǎn)了，所以在webkit上，可以實(shí)現(xiàn)更好的效果，為什么不用呢？
相關(guān)文章
CSS陰影效果的比較之drop-Shadow與box-Shadow
這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-05-23
CSS中妙用 drop-shadow 實(shí)現(xiàn)線條光影效果
本文將介紹一種利用 CSS 濾鏡 filter 的 drop-shadow()，實(shí)現(xiàn)對(duì) HTML 元素及 SVG 元素的部分添加陰影效果，以實(shí)現(xiàn)一種酷炫的光影效果，用于各種不同的場(chǎng)景之中，需要的朋友2021-11-08
