可以用CSS為圖片加陰影嗎?_Div+CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
       
        在網頁中插入圖片是再平常不過的事情了,但更多的時候為了美觀的需要,我們要給圖片加上陰影,圖片數量較多的時候,工作量是非常大的。重復勞動而且沒有工作效果。我們有沒有辦法用CSS給圖片加陰影呢?

        CSS中有一個概念大家應該都不生疏,那就是相對定位position:relative; 。我們應該學會靈活的運用CSS所提供的屬性。給圖片加陰影我們就可以用position:relative; 相對定位的辦法來實現。

        我們看下面的css代碼:

      示例代碼 [www.wf0088.com]
      .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代碼:

      示例代碼 [www.wf0088.com]
      <div class="waiwei">
      <div class="tupian" >
      <img src="/uploads/divcss/logo3.gif" alt="mb5u.com" />
      </div>
      </div>

        這個問題中的CSS和XHTML我們都應該能看明白,原理也非常清楚。就是利用了相對定位,將圖片定位與容器錯開并填表充色彩,最終形成了陰影的效果。

        我們運行下面的代碼看最終的效果:

      div css xhtml xml 代碼調試框 代碼調試框 [www.wf0088.com]

      [ 可先修改部分代碼 再運行查看效果 ]

        至此,這一效果順利的完成了。什么?不夠美觀?應該還可以做的更精致些?這些工作就交給追求完美的你去完成了。現在我們將上面的代碼稍加改變,形成一定的padding內邊距;并修改一下色彩,也感覺美觀多了。

      div css xhtml xml 代碼調試框 代碼調試框 [www.wf0088.com]

      [ 可先修改部分代碼 再運行查看效果 ]

        

      來源:無憂整理//所屬分類:Div+CSS教程/更新時間:2007-01-26
      相關Div+CSS教程