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

Words translated by CCJK


Request a call or contact us


    Call for professional assistance


    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

    Leave a Message

    Please leave us a message and
    be as detailed as possible

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

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