可以用CSS為圖片加陰影嗎?_Div+CSS教程
教程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; /*去除圖片下方的空隙*/
}
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>
<div class="tupian" >
<img src="/uploads/divcss/logo3.gif" alt="mb5u.com" />
</div>
</div>
這個問題中的CSS和XHTML我們都應該能看明白,原理也非常清楚。就是利用了相對定位,將圖片定位與容器錯開并填表充色彩,最終形成了陰影的效果。
我們運行下面的代碼看最終的效果:
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
至此,這一效果順利的完成了。什么?不夠美觀?應該還可以做的更精致些?這些工作就交給追求完美的你去完成了。現在我們將上面的代碼稍加改變,形成一定的padding內邊距;并修改一下色彩,也感覺美觀多了。
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
相關Div+CSS教程:
- 相關鏈接:
- 教程說明:
Div+CSS教程-可以用CSS為圖片加陰影嗎?。