王朝迅 - 2008-4-2 21:51:03
在网页中插入图片是再平常不过的事情了，但更多的时候为了美观的需要，我们要给图片加上阴影，图片数量较多的时候，工作量是非常大的。重复劳动而且没有工作效果。我们有没有办法用CSS给图片加阴影呢？
CSS中有一个概念大家应该都不陌生，那就是相对定位position:relative; 。我们应该学会灵活的运用CSS所提供的属性。给图片加阴影我们就可以用position:relative; 相对定位的办法来实现。[url=http://www.52css.com/css/c_position.html][color=#0000ff]关于position属性可以参考这里。[/color][/url]
我们看下面的css代码：
Example Source Code [[url]www.52css.com[/url]]
.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代码：
Example Source Code [[url]www.52css.com[/url]]
<div class="waiwei">
<div class="tupian" >
<img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" />
</div>
</div>
这个问题中的CSS和XHTML我们都应该能看明白，原理也非常清晰。就是利用了相对定位，将图片定位与容器错开并填表充色彩，最终形成了阴影的效果。
我们运行下面的代码看最终的效果：
Source Code to Run [[url]www.52css.com[/url]]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>我爱CSS - [url]www.52css.com[/url] 可以用CSS为图片加阴影吗？</title> <style type="text/css"> <!-- .waiwei { position:relative; background:#bbb; 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 } --> </style> </head> <body> <div class="waiwei"> <div class="tupian" > <img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" /> </div> </div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
至此，这一效果顺利的完成了。什么？不够美观？应该还可以做的更精致些？这些工作就交给追求完美的你去完成了。现在我们将上面的代码稍加改变，形成一定的padding内边距；并修改一下色彩，也感觉美观多了。
Source Code to Run [[url]www.52css.com[/url]]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>我爱CSS - [url]www.52css.com[/url] 可以用CSS为图片加阴影吗？</title> <style type="text/css"> <!-- .waiwei { position:relative; background:#f0f0f0; margin:0 auto; width:200px; } .tupian { background:#fff; border:1px solid #bbb; padding:2px; position:relative; top:-5px; left:-5px; } .tupian img { vertical-align:bottom } --> </style> </head> <body> <div class="waiwei"> <div class="tupian" > <img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" /> </div> </div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
CSS中有一个概念大家应该都不陌生，那就是相对定位position:relative; 。我们应该学会灵活的运用CSS所提供的属性。给图片加阴影我们就可以用position:relative; 相对定位的办法来实现。[url=http://www.52css.com/css/c_position.html][color=#0000ff]关于position属性可以参考这里。[/color][/url]
我们看下面的css代码：
Example Source Code [[url]www.52css.com[/url]].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代码：
Example Source Code [[url]www.52css.com[/url]]<div class="waiwei">
<div class="tupian" >
<img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" />
</div>
</div>
这个问题中的CSS和XHTML我们都应该能看明白，原理也非常清晰。就是利用了相对定位，将图片定位与容器错开并填表充色彩，最终形成了阴影的效果。
我们运行下面的代码看最终的效果：
Source Code to Run [[url]www.52css.com[/url]]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>我爱CSS - [url]www.52css.com[/url] 可以用CSS为图片加阴影吗？</title> <style type="text/css"> <!-- .waiwei { position:relative; background:#bbb; 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 } --> </style> </head> <body> <div class="waiwei"> <div class="tupian" > <img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" /> </div> </div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
至此，这一效果顺利的完成了。什么？不够美观？应该还可以做的更精致些？这些工作就交给追求完美的你去完成了。现在我们将上面的代码稍加改变，形成一定的padding内边距；并修改一下色彩，也感觉美观多了。
Source Code to Run [[url]www.52css.com[/url]]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>我爱CSS - [url]www.52css.com[/url] 可以用CSS为图片加阴影吗？</title> <style type="text/css"> <!-- .waiwei { position:relative; background:#f0f0f0; margin:0 auto; width:200px; } .tupian { background:#fff; border:1px solid #bbb; padding:2px; position:relative; top:-5px; left:-5px; } .tupian img { vertical-align:bottom } --> </style> </head> <body> <div class="waiwei"> <div class="tupian" > <img src="http://www.52css.com/skins/logo3.gif" alt="52css.com" /> </div> </div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]