本文主要包含css实现阴影,css阴影,css阴影效果,css边框阴影,css阴影代码等相关知识,佚名 希望在学习及工作中可以帮助到您
一、前言
我之前曾写过一篇关于实现跨浏览器实现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属性支持情况一览表
</div>
ok，现在我们对其应用IE模糊滤镜，模糊大小为5像素，结果会怎样，这是相关代码：
我之前曾写过一篇关于实现跨浏览器实现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) | |||||
| 将来 (2010之后) | 9.0 | 4.0 | 5.* | 6.0 | 11.0 |
— 支持
</div> </div>— 不支持
</div>
三、IE效果实现密匙 – 模糊滤镜
本文实现IE下的盒阴影效果的也是借助于IE滤镜，不同于“CSS实现跨浏览器兼容性的盒阴影效果⤴”一文中的shadow滤镜，本文实现效果的路径为模糊滤镜，英文名为blur filter⤴，可以让IE浏览器下的元素边缘模糊处理。我们先从最简单的实例开始展示：
一个普通的蓝背景div的代码可能是这样子：
ok，现在我们对其应用IE模糊滤镜，模糊大小为5像素，结果会怎样，这是相关代码：