在图片后添加阴影
将图片元素内嵌在div元素中,并将div元素的class属性置为 imgholder;
<div class="imgholder">
<img src="dadsaranick2.jpg" alt="Photo of Dad,Sara,Nick"/>
</div>
div.imgholder {
float:left;
background: url(dropshadow.png) no-repeat bottom
right !important;
background: url(dropshadow.gif) no-repeat bottom right;
margin: 10px 7px 0 10px !important;
margin: 10px 0 0 5px;
}
对图片本身,我们设置margin-right和margin-bottom属性来决定阴影域的大小,而边框和内间距的应用将使整个画面更具立体感
div.imgholder img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #666;
margin: -3px 5px 5px -3px;
padding: 2px;
}
将图片元素内嵌在div元素中,并将div元素的class属性置为 imgholder;
<div class="imgholder">
<img src="dadsaranick2.jpg" alt="Photo of Dad,Sara,Nick"/>
</div>
div.imgholder {
float:left;
background: url(dropshadow.png) no-repeat bottom
right !important;
background: url(dropshadow.gif) no-repeat bottom right;
margin: 10px 7px 0 10px !important;
margin: 10px 0 0 5px;
}
对图片本身,我们设置margin-right和margin-bottom属性来决定阴影域的大小,而边框和内间距的应用将使整个画面更具立体感
div.imgholder img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #666;
margin: -3px 5px 5px -3px;
padding: 2px;
}
本文介绍了一种使用CSS为图片添加阴影的方法。通过设置div容器的背景图像为阴影,并调整图片的边距、边框和填充等属性,可以创造出立体感强的图片显示效果。
919

被折叠的 条评论
为什么被折叠?



