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

随着html和css的迅速发展,网页元素实现阴影效果的方法已经非常灵活多样,不过今天还是针对新手介绍一种简单易懂的方法。

相对定位——相信大家都不陌生了,没错,我们就是利用元素位移,再加上其父级元素的背景色来实现阴影效果的。看代码:
html:

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

Facebooktwittergoogle_pluslinkedinmail

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP