最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

css实现div阴影效果,兼容性较好

来源:懂视网 责编:小采 时间:2020-11-27 18:53:48
文档

css实现div阴影效果,兼容性较好

css实现div阴影效果,兼容性较好:阴影效果看起来当然帅,firefox和safari/chrome通过私有属性支持box-shadow属性,box-shadow可以实现阴影效果,但是IE不支持box-shadow属性,却可以通过shadow滤镜来实现阴影效果.css"><style type="text/c
推荐度:
导读css实现div阴影效果,兼容性较好:阴影效果看起来当然帅,firefox和safari/chrome通过私有属性支持box-shadow属性,box-shadow可以实现阴影效果,但是IE不支持box-shadow属性,却可以通过shadow滤镜来实现阴影效果.css"><style type="text/c
阴影效果看起来当然帅,firefox和safari/chrome通过私有属性支持box-shadow属性,box-shadow可以实现阴影效果,但是IE不支持box-shadow属性,却可以通过shadow滤镜来实现阴影效果.

css"><style type="text/css">
div {
 width:500px; height:500px; margin:0px; background:#FFFFFF;
/*
第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色
*/
 box-shadow:0px 0px 10px #CCCCCC;
 -moz-box-shadow:0px 0px 10px #CCCCCC;
 -webkit-box-shadow:0px 0px 10px #CCCCCC;
/*direction 阴影角度 0°为从下往上 顺时针方向 strength 阴影段长度*/
 -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)\
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)\
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)\
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6)";
 *filter:progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=0, strength=6)
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=90, strength=6)
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=180, strength=6)
 progid:DXImageTransform.Microsoft.Shadow(color=#E9E9E9, direction=270, strength=6);
}
</style>
<div>php点点通-www.phpddt.com</div>

效果如下所示:

000.png

css实现div阴影效果,兼容性较好" />

文档

css实现div阴影效果,兼容性较好

css实现div阴影效果,兼容性较好:阴影效果看起来当然帅,firefox和safari/chrome通过私有属性支持box-shadow属性,box-shadow可以实现阴影效果,但是IE不支持box-shadow属性,却可以通过shadow滤镜来实现阴影效果.css"><style type="text/c
推荐度:
标签: 设置 实现 效果
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top