IE下模擬css3中的box-shadow(陰影)效果代碼
發(fā)布時間:2013-09-11 17:35:19 作者:佚名
我要評論

在ie下模擬css3中的box-shadow(陰影)可以使用ie的Shadow(陰影)濾鏡來實現(xiàn),需要注意的是該濾鏡必須配合background屬性一起使用,否則該濾鏡失效
在ie下模擬css3中的box-shadow(陰影)可以使用ie的Shadow(陰影)濾鏡
基本語法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度(數(shù)值), Strength=陰影半徑(數(shù)值));
注意:該濾鏡必須配合background屬性一起使用,否則該濾鏡失效。
IE下模擬css3中的box-shadow(陰影)代碼:
.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
演示地址:http://www.css88.com/demo/box-shadow/
基本語法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度(數(shù)值), Strength=陰影半徑(數(shù)值));
注意:該濾鏡必須配合background屬性一起使用,否則該濾鏡失效。
IE下模擬css3中的box-shadow(陰影)代碼:
復制代碼
代碼如下:.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
演示地址:http://www.css88.com/demo/box-shadow/
相關文章
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光),通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11- 這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結 ,具有一定的參考價值,有需要的可以了解一下。2016-12-03
- 下面小編就為大家?guī)硪黄P于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-08
詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強大的,能設定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計
這篇文章主要介紹了CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計的相關資料,感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實現(xiàn)文字陰影效果的方法,豐富文字排版布局美化效果,感興趣的小伙伴們可以參考一下2016-02-24- 最近在整理學習CSS3的一些小知識,現(xiàn)在已經(jīng)整理了CSS3選擇器,CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運用是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-19
css實現(xiàn)跨瀏覽器的box-shadow盒陰影效果告別圖片實現(xiàn)類似效果(2)
前面的文章雖然實現(xiàn)IE下的盒陰影效果也是使用的濾鏡,但是使用的是shadow濾鏡,這種濾鏡的效果很牽強,效果過渡不自然.而本文實現(xiàn)的IE下的盒陰影效果就相對非常自然,而且2013-01-08- 前段時間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個新屬性的使用方法,這幾次繼續(xù)整理了有關于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細2012-12-25