在平面的网页上使用边框阴影,不仅可以为网页增添新意,更重要的是,让平面的网页有了空间的立体感。边框的阴影效果一般是使用图片或者css样式实现。图片可以实现一些比较丰富的阴影样式,而且很少存在浏览器兼容性的问题。但是往后如果需要修改的话比较麻烦。使用css方式可以方便修改,但浏览器兼容方面就比较需要注意。
css代码:
<style type="text/css">
.mydiv{
width:220px;height:auto;padding:5px;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
</style>
html代码:
<div class="mydiv"> TEXT TEXT TEXT </div>
参数说明:
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轴阴影段长度) (往四周阴影段长度) (阴影段颜色)
最后效果:

本文地址:http://wangshuming.cn/article/6.html
免责声明:本文为转载文章,来源于网络,文章版权归原作者所有。若因本站的引用侵犯了您的版权权利,麻烦发邮件49212578@qq.com联系我们及时删除,谢谢。
免责声明:本文为转载文章,来源于网络,文章版权归原作者所有。若因本站的引用侵犯了您的版权权利,麻烦发邮件49212578@qq.com联系我们及时删除,谢谢。
发表评论