簡單易變的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;
}/*內框移位，外框的背景色就成了陰影*/

應用在圖片上