CSS阴影边框，兼容各大浏览器

最新推荐文章于 2025-04-08 12:30:00 发布

转载最新推荐文章于 2025-04-08 12:30:00 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxu220/p/3403137.html

本文详细介绍了如何使用CSS为网页元素添加阴影效果，包括IE、Firefox、Safari、Chrome、Opera和IE9等浏览器的兼容性写法。通过具体示例代码，展示了如何设置阴影的方向、长度和颜色。

css代码：
<style type="text/css">
.mydiv{
width:250px;height:auto;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>

for ie:
direction 阴影角度 0°为从下往上顺时针方向
strength 阴影段长度

-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;

第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色

div代码：
<div class="mydiv">
123123213123
</div>