代码简介:
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
<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