css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)

2024-07-11 08:49:24

字体：大中小

来源：转载

供稿：网友

一、前言
我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”，本文虽然题目类似，但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是使用的是shadow滤镜，这种滤镜的效果很牵强，效果过渡不自然，见下图：
前文不自然的阴影效果张鑫旭-鑫空间-鑫生活

而本文实现的IE下的盒阴影效果就相对非常自然，而且还支持内阴影的UI表现。到底是如何实现的，究竟效果如何，请继续浏览。
二、浏览器纯爷们模式下的支持情况
CSS3 box-shadow属性基本上所有的现代浏览器都支持良好。但是要实现跨浏览器支持，你需要使用以下属性的所有变体：
•在Opera浏览器和IE9以及以上版本浏览器中（虽然还在妈妈肚子中），直接使用不带前缀的box-shadow属性
•为支持Firefox浏览器，你需要使用-moz-前缀，即-moz-box-shadow
•为支持webkit核心的浏览器（如Google Chrome 和 Apple Safari），你需要-webkit-前缀，合起来就是-webkit-box-shadow
•一直到IE8浏览器，没有纯正的支持box-shadow属性的CSS样式，需要使用另外的方法模拟
主要浏览器对CSS3 box-shadow属性支持情况一览表

	Internet Explorer	Firefox	Safari	Chrome	Opera
很久以前	6.0	3.0	3.2	3.0	9.6
不远的曾经	7.0	3.5	4.0	4.0	10.10
目前	8.0	3.6	5.0	5.0	10.60
即将到来(最新2010)	8.0	3.6	5.0	5.0	10.60
将来 (2010之后)	9.0	4.0	5.*	6.0	11.0

— 支持

— 不支持

三、IE效果实现密匙 – 模糊滤镜
本文实现IE下的盒阴影效果的也是借助于IE滤镜，不同于“CSS实现跨浏览器兼容性的盒阴影效果⤴”一文中的shadow滤镜，本文实现效果的路径为模糊滤镜，英文名为blur filter⤴，可以让IE浏览器下的元素边缘模糊处理。我们先从最简单的实例开始展示：
一个普通的蓝背景div的代码可能是这样子：

复制代码

上一篇：css实现跨浏览器的盒阴影效果告别图片实现类似效果

下一篇：css3背景图片透明叠加属性cross-fade简介及用法实例