可以用CSS为图片加阴影吗?

2016-03-02    编辑:kepeer     点击(

在网页中插入图片是再平常不过的事情了,但更多的时候为了美观的需要,我们要给图片加上阴影,图片数量较多的时候,工作量是非常大的。重复劳动而且没有工作效果。我们有没有办法用CSS给图片加阴影呢?
  CSS中有一个概念大家应该都不陌生,那就是相对定位position:relative; 。我们应该学会灵活的运用CSS所提供的属性。给图片加阴影我们就可以用position:relative; 相对定位的办法来实现。关于position属性可以参考这里。
  我们看下面的css代码:

 代码如下 复制代码
.waiwei { 
    position:relative; 
    background:#eee;    
    margin:0 auto; 
    width:200px;

.tupian {
    background:#fff;    
    border:1px solid #c00; 
    padding:0; 
    position:relative;    
    top:-5px; 
    left:-5px; 
}
.tupian img {
    vertical-align:bottom; /*去除图片下方的空隙*/
}

  我们在XHTML中插入图片,以下是XHTML代码:

 代码如下 复制代码
<div class="waiwei"> 
    <div class="tupian" > 
    <img src="/upimg/20070505/11N303A514022551.jpg" alt="" /> 
    </div> 
</div> 

  这个问题中的CSS和XHTML我们都应该能看明白,原理也非常清晰。就是利用了相对定位,将图片定位与容器错开并填表充色彩,最终形成了阴影的效果。
   至此,这一效果顺利的完成了。什么?不够美观?应该还可以做的更精致些?这些工作就交给追求完美的你去完成了。