CSS实现自适应的图片背景边框代码

代码简介：

CSS漂亮的图片边框，边框是用背景图片修饰的，不过可以自适应大小，这点挺实用的，不论你的图片有多大，它始终显示在图片的外围，不会错位，这当然还要归功于CSS的功劳。

代码内容：

View Code
<html>
<head>
<title>CSS实现自适应的图片背景边框代码_网页代码站(www.webdm.cn)</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://www.webdm.cn/images/20090930/tr.gif") no-repeat right top;

}
.mir{
background:url("http://www.webdm.cn/images/20090930/rb.gif") no-repeat right bottom;
padding:10px;
padding-bottom:0;
padding-left:0;
}
.mil{
background:url("http://www.webdm.cn/images/20090930/l.gif") no-repeat left top;
}
</style>
</head>
<body>
<div class='out'>
<div class='mil'>
<div class='mir'>
<div class='in'>
<img src='http://www.webdm.cn/images/20090930/1.jpg' />
</div>
</div>
</div>
</div>
<div class='out'>
<div class='mil'>
<div class='mir'>
<div class='in'>
<img src='http://www.webdm.cn/images/20090930/11.jpg' />
</div>
</div>
</div>
</div>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/85af318f-1215-4549-b980-48587d04b862.html

 

 

posted @ 2011-08-08 10:29  网页代码站  阅读(964)  评论(0)  编辑  收藏  举报