CSS实现自适应的图片背景边框代码
生活随笔
收集整理的這篇文章主要介紹了
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
?
?
轉載于:https://www.cnblogs.com/webdm/archive/2011/08/08/2130643.html
總結
以上是生活随笔為你收集整理的CSS实现自适应的图片背景边框代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： struts2.0和jQuery1.5的
- 下一篇： CSS_DIV学习记录2(用背景颜色实现