css3如何添加div阴影效果?box-shadow属性详解

css3如何添加div阴影效果?box-shadow属性详解

下面是示例代码:

<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);



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



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



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

}

</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">

fdsfdfd

</div>


 

效果如下:
css3如何添加div阴影效果?box-shadow属性详解

未经允许不得转载:转载请注明出处-代码猫代码猫 » css3如何添加div阴影效果?box-shadow属性详解
分享到:
赞(0)

评论抢沙发

评论前必须登录!

日主题已更新到 V3.2版本

点我日她