简单易变的CSS阴影效果
代码解析
HTML部分
<div class="out narrow">
<div class="in ltin tpin">
<h2>NARROW</h2>
<p>This is the text that goes in the middle.</p>
</div>
</div>
<!--以上只是第一个文字块的HTML代码，但原理和其他几个都类似,里面的class值有空格,如后者与前者的样式有不一的就用后者的样式-->
<div class="in ltin tpin">
<h2>NARROW</h2>
<p>This is the text that goes in the middle.</p>
</div>
</div>
<!--以上只是第一个文字块的HTML代码，但原理和其他几个都类似,里面的class值有空格,如后者与前者的样式有不一的就用后者的样式-->
css代码部分
.out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}/*设置外框(背景、边框与定位)*/
.in2 {
display:block;
background:#777;
border:1px solid #999;
position:relative;
padding:1px;
margin:1px;
}
.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}/*内框的设定*/
.ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.rtin {
left:5px;
}/*内框移位，外框的背景色就成了阴影*/
