用相对定位和负向移动实现阴影效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】用相对定位和负向移动实现阴影效果

作者:Dezai.CN / 发布于2013/1/29/ 660

<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>

试试其它关键字

　阴影效果　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)