详解CSS3阴影 box-shadow的使用和技巧总结

时间：2017-04-09

.box-shadow-9呈现的效果，同boder:1px solid red相似，但box-shadow的效果与border效果在对象高度上有区别，正好要比border高度大一个扩展半径。而且阴影不影响页面的任何布局，这一点可以通过查看firebug下的layout图得以证实。

5）在ie下模拟css3中的box-shadow阴影效果

方法一：可以使用IE的Shadow滤镜

基本语法：filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

box-shadow{  
    filter: progid:DXImageTransformMicrosoftShadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/  
    background-color: #ccc;  
    -moz-box-shadow:2px 2px 5px #969696;/*firefox*/  
    -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/  
    box-shadow:2px 2px 5px #969696;/*opera或ie9*/  
}

在六一儿童节的专题中，我是这么处理的：

liblk-item{  
         width:423px;  
         height:229px;  
         float:left;  
         padding:8px;  
         margin:2px 18px 13px 21px;  
         display:inline;  
         border:1px solid #d3c998;  
         border-radius:2px;  
         filter:progid:DXImageTransformMicrosoftShadow(color='#d3c998', Direction=135,Strength=5);/*for ie6,7,8*/  
         background-color: #fff;  
         -moz-box-shadow:2px 2px 5px#d3c998;/*firefox*/  
         -webkit-box-shadow:2px 2px 5px#d3c998;/*webkit*/  
         box-shadow:2px 2px 5px #d3c998;/*opera或ie9*/  
  
}

方法二：有些js和.htc的hack文件可以实现IE中的阴影效果。

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

它的使用方法是：下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

这个脚本的缺点是IE只支持一部分的box-shadow值。需要注意：

当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
不支持RGBA值中的alpha透明度。
不支持inset内阴影。
不支持阴影扩展。
阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。

方法三：使用jQuery的插件jquery.boxshadow.js，插件的下载地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

使用方法很简单，将该文件和jquery版本库引入head标签，插入以下js效果代码：

<script type="text/javascript">  
          $(document)ready(function(){  
   if($browsermsie) {  
     $('obj')boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
   }  
 });  
</script>

注意：js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;

补充知识：CSS3的属性

border-top-left-radius：[<length> | <percentage> ] [ <length> | <percentage> ]?

默认值：0

取值：

<length>：

用长度值设置对象的左上角(top-left)圆角半径长度。不允许负值

<percentage>：

用百分比设置对象的左上角(top-left)圆角半径长度。不允许负值

说明：

设置或检索对象的左上角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。如设置border-top-left-radius:5px10px;表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。对应的脚本特性为borderTopLeftRadius。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

共3页:

3/3下一篇

上一篇：css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 下一篇：使用CSS3实现一个3D相册效果实例

详解CSS3阴影 box-shadow的使用和技巧总结

相关文章

最新文章