简单易变的CSS阴影效果

厌倦了在图片处理软件上给每张图片加上边框修饰？让CSS帮你一把吧！嘿嘿，看看下面的几张效果图，边框都不是用图片做的，很方便吧？

文字块的应用效果

NARROW

This is the text that goes in the middle.

MEDIUM

Another box that has a bit more text so that the box will be taller and the shadow stretches to suit.

WIDE

One more text box that has a lot more text so that the box will be even taller and the shadow will still shadow to suit. The shadow color can be matched to the background and can also be positioned to the left or right.

 

内阴影

MEDIUM

and finally a text box with a surround shadow.

代码解析

HTML部分

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

}/*内框移位，外框的背景色就成了阴影*/

应用在图片上