CSS阴影效果(兼容N多浏览器)

来源:互联网 发布:got it 和get it的区别 编辑:程序博客网 时间:2024/06/03 19:14

===========原谅我笑点低,说IE对CSS3支持如狗屎,233333333,我是真笑啊,不是嘲笑,2333333333333333=========

标准方法当然就是指使用CSS3的方法了,这个应该不少同行应该知道,参见如下代码:

.shadow {    -moz-box-shadow: 3px 3px 4px #000;    -webkit-box-shadow: 3px 3px 4px #000;    box-shadow: 3px 3px 4px #000;(ps:参数含义是:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。 )}



三、那么IE浏览器呢?

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

.shadow {    /* 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');}


虽然效果不及Firefox,chrome等现代浏览器,但是还能凑合着用用。

四、样式综合

如下代码:

.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');}
0 0