Blog

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

简单阴影效果 随着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

146,096,379

Request a call or contact us

  •  

    Call ccjk.support 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

4.00
  •  
    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.
TOP