使用relative属性为DIV和图片添加背影

最新推荐文章于 2021-06-22 07:32:41 发布

iteye_12132

最新推荐文章于 2021-06-22 07:32:41 发布

阅读量180

点赞数

分类专栏： CSS 文章标签： CSS XHTML HTML

本文链接：https://blog.csdn.net/iteye_12132/article/details/81897548

版权

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/css_shadow/


<style type="text/css">

/* 为 DIV 加阴影 */
.out {
position:relative;
background:bbb;
margin:10px auto;
width:240px;
}
.in {
background:fff;
border:1px solid 555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
}

/* 为 图片 加阴影 */
.imgShadow {
position:relative;
background:bbb;
margin:10px auto;
width:220px;
}

.imgContainer {
position:relative;
top:-5px;
left:-5px;
background:fff;
border:1px solid 555;
padding:0;
}

.imgContainer img {
display:block;
}

</style>

<h4>为 DIV 加阴影:</h4>
<div class="out">
<div class="in" >
<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
</div>
</div>

<h4>为 图片 加阴影:</h4>
<div class="imgShadow">
<div class="imgContainer" >
<img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />
</div>
</div>