如何用CSS实现DIV块的阴影效果

html-css014

如何用CSS实现DIV块的阴影效果,第1张

可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法

Div 添加阴影：

<style type="text/css">

.mydiv{

   width:250pxheight:autoborder:#909090 1px solidbackground:#fffcolor:#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">

    123123213123

</div>