简单易变的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值有空格,如后者与前者的样式有不一的就用后者的样式-->

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