相对定位实现简单阴影效果

相对定位实现简单阴影效果

随着html和css的迅速发展，网页元素实现阴影效果的方法已经非常灵活多样，不过今天还是针对新手介绍一种简单易懂的方法。
相对定位——相信大家都不陌生了，没错，我们就是利用元素位移，再加上其父级元素的背景色来实现阴影效果的。看代码：
html：

<div class=”container”>

<div class=”content”>

<img src=”css.jpg” />

</div>

</div>

css：
.container, .content, .content img {width:200px; height:200px;}
.container {position:relative; background:#e5e5e5; z-index:1;}
.content {position:absolute; background:#fff; z-index:1; left:-5px; top:-5px; border:1px solid #ccc;}

这样就实现了上面附图的效果，很容易理解吧~其中content部分，也可以是文字或其它内容。
当然，简单的方法实现的效果也是简单的，这里阴影只能是纯色的；不过，你也可以用PS做好的阴影效果作为背景图代替上面的背景色，来实现立体的阴影效果。