厭倦了在圖片處理軟件上給每張圖片加上邊框修飾？讓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;
}/*內框移位，外框的背景色就成了陰影*/ 應用在圖片上

轉載于:https://www.cnblogs.com/goody9807/archive/2008/06/11/1217440.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的简单易变的CSS阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。