CSS實現自適應的圖片背景邊框_圖片特效特效

CSS漂亮的圖片邊框，邊框是用背景圖片修飾的，不過可以自適應大小，這點挺實用的，不論你的圖片有多大，它始終顯示在圖片的外圍，不會錯位，這當然還要歸功于CSS的功勞。

<html>
<head>
<title>漂亮圖片邊框</title>
<style type="text/css">
body{
text-align:center;
margin-top:100px;
}
.in{
border:1px solid #666;
padding:4px;
}
.out{
float:left;
background:url("http://p1.mb5u.com/texiao/1/20110225160524402.gif") no-repeat right top;

}
.mir{
background:url("http://p1.mb5u.com/texiao/1/20110225160524403.gif") no-repeat right bottom;
padding:10px;
padding-bottom:0;
padding-left:0;
}
.mil{
background:url("http://p1.mb5u.com/texiao/1/20110225160524404.gif") no-repeat left top;
}
</style>
</head>
<body>
<div   id="jvzrvll"   class='out'>
<div   id="hfvd5pf"   class='mil'>
<div   id="frjbjzn"   class='mir'>
<div   id="7b5fjxp"   class='in'>
<img src='http://p1.mb5u.com/texiao/1/20110225160524405.jpg' />
</div>
</div>
</div>
</div>
<div   id="blrhnzl"   class='out'>
<div   id="5h7dhvz"   class='mil'>
<div   id="zjntxz5"   class='mir'>
<div   id="trvpp5x"   class='in'>
<img src='http://p1.mb5u.com/texiao/1/20110225160524406.jpg' />
</div>
</div>
</div>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-22

[收藏][報錯][返回列表]

相關圖片特效特效：

CSS實現自適應的圖片背景邊框_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些