CSS实现跨浏览器兼容性的盒阴影效果

最新推荐文章于 2024-09-14 15:29:58 发布

yudan215

最新推荐文章于 2024-09-14 15:29:58 发布

阅读量94

点赞数

分类专栏： HTML5 文章标签： ui

本文链接：https://blog.csdn.net/yudan215/article/details/84179255

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。

对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于下面的代码：


.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}