css投影效果的兼容代码
来源:互联网 发布:自学英语口语软件 编辑:程序博客网 时间:2024/06/13 02:10
一、
在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果:
然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果。
二、标准方法标准方法当然就是指使用CSS3的方法了,这个应该不少同行应该知道,参见如下代码:
.shadow {-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。
如果我们把含上面样式的这个class shadow应用到图片上,就会产生如下的效果(截自Firefox3.6):
对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢?box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜,是IE浏览器私有的一个东西,可以模拟还凑合的盒阴影效果,使用类似于下面的代码:
/* 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');
}
将shadow这个class应用到图片上,结果如下(截自IE6浏览器):
虽然效果不及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');
}
更多CSS3属性的跨浏览器支持可以查阅这里(css3please.com)。
五、浏览器支持情况Firefox 3.5+Safari 3+Google ChromeOpera 10.50Internet Explorer 5.5本文由站酷网-pwdesign原创,转载请保留此信息,多谢合作。
- css投影效果的兼容代码
- DIV+CSS投影效果
- css投影效果
- CSS样式投影效果
- CSS相对定位实现DIV层的投影(阴影)效果
- 兼容主流浏览器的CSS透明效果
- 浏览器兼容的css阴影效果
- 兼容各浏览器的CSS倒影效果
- OpenGL ES 正交投影与透视投影效果对比的代码实现
- 编写跨浏览器兼容的 CSS 代码
- 编写跨浏览器兼容的 CSS 代码
- [CSS] 编写跨浏览器兼容的 CSS 代码的金科玉律
- CSS实现兼容浏览器的文字阴影效果
- CSS兼容火狐与IE的半透明效果
- 兼容各种主流浏览器的CSS阴影效果
- css实现边框阴影效果的方法(含兼容)
- 纯css打造投影效果——CSS3属性transform的应用
- CSS特殊样式(六) box-shadow实现纸张的曲线投影效果
- 使用PLsql连接Oracle数据库的方法
- Missing contentDescription attribute on image
- 一套新的SqlServer2005分页方案,很实用,很快!
- html框架应用的代码
- Maple学习(二)高尔夫球弹道的飞行轨迹
- css投影效果的兼容代码
- c++类模板及参数类型的运行时判断
- 提问的艺术
- 面向对象编程进阶
- Oracle案例:分析10053跟踪文件
- li 标签左右显示[图]
- 自定义UITableView:核心代码就3句
- iphone通讯录AddressBook.framework和AddressBookUI.framework的应用
- WSDL Style和use的组合方式说明