在网页中插入图片是再平常不过
事情了
但更多时候为了美观需要我们要给图片加上阴影图片数量较多时候工作量是非常大
重复劳动而且没有工作效果我们有没有办法用CSS给图片加阴影呢？CSS中有
个概念大家应该都不陌生那就是相对定位position:relative;我们应该学会灵活运用CSS所提供属性给图片加阴影我们就可以用position:relative;相对定位办法来实现有关position属性可以参考这里我们看下面
css代码:.waiwei{
position:relative;
background:#eee;
margin:0auto;
width:200px;
}
.tupian{
background:#fff;
border:1pxsolid#c00;
padding:0;
position:relative;
top:-5px;
left:-5px;
}
.tupianimg{
vertical-align:bottom;/*去除图片下方
空隙*/}
我们在XHTML中插入图片
以下是XHTML代码:<div
=\"waiwei\"><div
=\"tupian\"><imgsrc=\"http://www./Files/BeyondPic/2007-5/24/075241605511306.g
\"alt=\"52css.com\"/></div>
</div>
这个问题中
CSS和XHTML我们都应该能看明白原理也非常清晰就是利用了相对定位将图片定位和容器错开并填表充色彩最终形成了阴影效果我们运行下面
代码看最终效果:=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
至此
这效果顺利完成了什么？不够美观？应该还可以做更精致些？这些工作就交给追求完美你去完成了现在我们将上面代码稍加改变形成定padding内边距；并修改下色彩也感觉美观多了=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
最新评论