css实现div边框阴影效果大总结

发布时间:2020-07-16编辑:脚本学堂
为了能突出网页页面丰富多彩,边框的阴影效果也是常见的,前面的文章曾讲过关于实现边框阴影效果的例子,但是本文是对一些主流浏览器的边框阴影进行汇总。需要的朋友一定好好看下。

下面是对兼容一些主流浏览器的边框阴影总结
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>

有兴趣的话,可以验证一下效果。