css下的div阴影效果

在网页设计中，阴影效果常常被用来增加页面的层次感，更加美观。而使用CSS下的div阴影效果，可以使页面元素更加立体化，更加生动优美。

下面，我们来看一下CSS下如何实现div阴影效果。

.shadow{
    box-shadow: 1px 1px 2px #888888; 
    -webkit-box-shadow: 1px 1px 2px #888888; 
    -moz-box-shadow: 1px 1px 2px #888888;
} 

代码解释：

box-shadow是CSS3中的新属性，它可以实现在一个标签下创建阴影，它包括四个值，分别代表水平偏移距离、垂直偏移距离、模糊半径和阴影颜色（可省略）。

需要注意的是，不同浏览器对box-shadow属性的支持不同，所以我们需要用-webkit-box-shadow和-moz-box-shadow来分别兼容webkit内核和Mozilla内核的浏览器。

举个例子，如果我们想要给一个中的图片添加阴影，可以这样写：

.shadow{
    box-shadow: 1px 1px 2px #888888; 
    -webkit-box-shadow: 1px 1px 2px #888888; 
    -moz-box-shadow: 1px 1px 2px #888888;
}
<img src="example.jpg" class="shadow"/> 

这样，在页面中呈现出来的图片就会有立体感，更加美观动人。

总之，在CSS下使用div阴影效果，可以轻松地让页面元素更加生动有趣。通过灵活运用box-shadow属性，更是可以实现各种不同风格、不同形状的阴影效果，大大增强了网页设计的美感和视觉效果。