css实现跨浏览器的盒阴影效果告别图片实现类似效果
发布时间:2013-01-08 14:08:29 作者:佚名 我要评论
在web页面的UI表现中,投影效果可以说是非常常见的一种表现效果了,然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
一、无关紧要碎碎念
在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):
三、那么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');
}
将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');
}
相关文章
- 在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜来实现,需要注意的是该滤镜必须配合background属性一起使用,否则该滤镜失效2013-09-11
- CSS控制背景图像平铺,从而实现区域边框阴影的效果,可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,个人感觉还不错,具体实现如下建议收藏下哦2013-08-25
- 想做个页面用到css3的圆角和阴影效果,但ie浏览器不支持,之前也听说有插件可以实现,周六在网上找到了一个方法,原文如下: 但凡是前端工程师,都知道IE6,IE7,IE8不支2013-07-02
css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)
前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然.而本文实现的IE下的盒阴影效果就相对非常自然,而且2013-01-08css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div2012-12-18- 你在使用box-shadow来实现阴影效果的时候,有没有注意到有些情况下,阴影并不是透明的效果2011-08-28
- 通过这个小例子你是否觉得CSS处理文字效果方面功能比较强大呢?确实是这样的,用CSS可以给文字加阴影、加背景,让文字变色炫彩、变成3维的,这并不难,好好研究一下这几个2009-10-23
- 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以采取“视觉欺骗大法”——定义渐变边框来实现: [code] 2009-07-11阴影效果在以前或许会采用图片来实现,而如今使用css便可实现,本文有个不错的示例,喜欢的朋友可以参考下2013-09-16
最新评论