053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

如何用css实现div框的阴影效果

时间:2017-06-28

以下为本人总结兼容一切主流浏览器的边框阴影
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>
 
效果图:

如何用css实现div框的阴影效果
相关文章

青岛网站建设 青岛网站设计 青岛网站制作 青岛网站优化 Copyright © 2009-2017 千龙网络 版权所有 Power by DedeCms 鲁ICP备09004053号