相对定位实现简单阴影效果
随着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做好的阴影效果作为背景图代替上面的背景色,来实现立体的阴影效果。