CSS实现div框阴影,兼容各主流浏览器
2017-02-28 09:54
375 查看
在平面的网页上使用边框阴影,不仅可以为网页增添新意,更重要的是,让平面的网页有了空间的立体感。边框的阴影效果一般是使用图片或者css样式实现。图片可以实现一些比较丰富的阴影样式,而且很少存在浏览器兼容性的问题。但是往后如果需要修改的话比较麻烦。使用css方式可以方便修改,但浏览器兼容方面就比较需要注意。
下面代码经过测试,兼容ie7-10,chrome,firefox。
css代码:
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轴阴影段长度) (往四周阴影段长度) (阴影段颜色)
最后效果:
下面代码经过测试,兼容ie7-10,chrome,firefox。
css代码:
5 |
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轴阴影段长度) (往四周阴影段长度) (阴影段颜色)
最后效果:
相关文章推荐
- div实现阴影边框效果(适应各主流浏览器)
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- CSS实现瀑布流等分布局效果,兼容各大主流浏览器
- javascript创建css、js,onload触发callback兼容主流浏览器的实现
- 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]
- CSS实现兼容浏览器的文字阴影效果
- CSS实现渐变 兼容各主流浏览器
- javascript创建css、js,onload触发callback兼容主流浏览器的实现
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- ps+div+css打造蓝色后台--login页面实现,ps切片,浏览器兼容
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
- [原创]一个纯css实现兼容各种主流移动pc浏览器的时间轴
- 兼容各种主流浏览器的CSS阴影效果
- ps+div+css打造蓝色后台--login页面实现,ps切片,浏览器兼容
- div+css 实现无js滚动 兼容各大浏览器!!!
- css实现三角形 兼容主流浏览器
- ps+div+css打造蓝色后台--login页面实现,ps切片,浏览器兼容
- [转]纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层
- DIV+CSS网页设计 IE6 IE7 FF 多浏览器兼容方案