您现在的位置是：网站首页> 编程资料编程资料

css实现跨浏览器的盒阴影效果告别图片实现类似效果IE下模拟css3中的box-shadow(阴影)效果代码CSS控制背景图像平铺实现边框阴影效果让IE6、IE7、IE8支持CSS3的圆角、阴影样式css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果css box-shadow阴影不透明的解决办法CSS 文字加阴影变3D效果演示使用CSS给图片添加阴影的方法div实现阴影边框效果(适应各主流浏览器)

2021-09-07 789人已围观

简介在web页面的UI表现中，投影效果可以说是非常常见的一种表现效果了,然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效果

一、无关紧要碎碎念
在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）：
Firefox下的盒阴影效果截图张鑫旭-鑫空间-鑫生活

三、那么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浏览器）：
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');
}

上一篇：css float浮动属性的深入研究及详解拓展(二)设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢