filter:drop-shadow有方向的陰影使用說明

2024-07-11 08:29:20

字體：大中小

來源：轉載

供稿：網友

前些天在做一個項目的時候，用到了陰影，陰影是個方向都有的，于是寫了一大坨box-shadow來實現，然后今天看到bricss說到filter:drop-shadow，豁然開朗。
具體的實現不用不細講了，直接看代碼：
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));
}

效果對比：

關于drop-shadow這個濾鏡：

不了解filter的同學請訪問：-webkit-filter是神馬？
chrome從21版本開始支持（現在主流版本是22），Safari 6和ios 6中Safari也都支持
firefox、Opera、ie繼續用box-shadow吧
filter規范現在由webkit和adobe在推，firefox在跟進，ie10也支持一點點了，所以在webkit上，可以實現更好的效果，為什么不用呢？

上一篇：IE6 CSS高度height:100% 計算失效/無效

下一篇：ie6~ie9 hack兼容寫法已測試