您的位置:首页 > Web前端 > CSS

CSS实现div框阴影,兼容各主流浏览器

2017-02-28 09:54 375 查看
在平面的网页上使用边框阴影,不仅可以为网页增添新意,更重要的是,让平面的网页有了空间的立体感。边框的阴影效果一般是使用图片或者css样式实现。图片可以实现一些比较丰富的阴影样式,而且很少存在浏览器兼容性的问题。但是往后如果需要修改的话比较麻烦。使用css方式可以方便修改,但浏览器兼容方面就比较需要注意。

下面代码经过测试,兼容ie7-10,chrome,firefox

css代码:

5

html代码:

参数说明:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/

direction :阴影角度 0°为从下往上 顺时针方向

strength 阴影段长度

-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/

-moz-box-shadow : (x轴阴影段长度)  (y轴阴影段长度) (往四周阴影段长度) (阴影段颜色)

最后效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: