图片圆角边框自适应宽高（深夜原创）
最近挺忙，没来得及更新博客！夜深了，给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法。请先看如下代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="庞淦">
<meta name="keywords" content="关键字">
<meta name="description" content="网站描述">
<meta name="robots" content="all" />
<title>圆角框自适应宽高</title>
<style type="text/css">
/*css reset*/
html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre,spang{margin:0;padding:0;}
body{font:0.75em Arial,"SimSun","sans-serif";color:#333;} /*1em=16px,0.75em=12px(0.0625*12)*/
a{text-decoration:none;color:#333;outline:none;}
a:hover{text-decoration:underline;color:#23930c;}
textarea,select,input,button,label{vertical-align:middle}
button{background:none;border:none;cursor:pointer}
address,cite,code,em,var{font-style:normal;}
pre{text-align:center;white-space:pre-wrap;word-wrap: break-word;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
img{border:0;}
/*clear float*/
.clearfix{clear:both;height:1%;display:table;display:inline-block;}
.clearall{overflow:hidden;_zoom:1;}
.clear{clear:both;font-size:0;height:0;line-height:0;}
/*circle 单色圆角框自适应宽高*/
.circleBar{width:200px;margin:20px;color:white;background:#000 url(images/4_03.png) left top no-repeat;}
.circleBar h2{padding:10px;font-size:13px;text-align:center;background:url(images/4_05.png) right top no-repeat}
.circleBar_tip{background:url(images/4_09.png) left bottom no-repeat;}
.circleBar_tip p{padding:10px;background:url(images/4_10.png) right bottom no-repeat;}
/*circle 带阴引的圆角本自适应宽高*/
.circleBar2_lb{width:200px;margin:20px;color:#666;background:url(images/1_06.png) left bottom no-repeat;padding-bottom:2px;/*padding-bottom:2px;切图失误两像素，正常情况下要删去此句。*/}
.circleBar2_rb{background:url(images/01_06.png) right bottom no-repeat;}
.circleBar2_lt{background:url(images/1_03.png) left top no-repeat;}
.circleBar2_rt{background:url(images/1_04.png) right top no-repeat;padding:10px;}
/*五图法二维滑动门精典圆角*/
.circleBar3{width:200px;margin:20px;color:#666;background:url(images/01_03.png) left top no-repeat;}
.circleBar3 h2{padding:10px 0 10px;height:18px;background:url(images/01_04.png) right top no-repeat;text-align:center;font-size:17px;}
.circleBar3_y{background:url(images/1_09.png) right top repeat-y;padding:30px 10px 0px;margin-top:-35px;}
.circleBar3_bottom{background:url(images/01_07.png) left bottom no-repeat;}
.circleBar3_bottom p{background:url(images/1_11.png) right bottom no-repeat;padding-bottom:8px;font-size:0;line-height:0;height:2px;overflow:hidden}
</style>
</head>
<body>
<h1>单色圆角框自适应宽高</h1>
<div class="circleBar">
<h2>单色圆角框自适应宽高</h2>
<div class="circleBar_tip">
<p>纯色圆角框自适应宽高,把四个圆角切分成四个小块。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。</p>
</div>
</div>
<h1>带阴引的圆角本自适应宽高</h1>
<div class="circleBar2_lb">
<div class="circleBar2_rb">
<div class="circleBar2_lt">
<p class="circleBar2_rt">纯色圆角框自适应宽高,把四个圆角切分成四个小块。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。</p>
</div>
</div>
</div>
<div class="circleBar2_lb" style="width:320px">
<div class="circleBar2_rb">
<div class="circleBar2_lt">
<p class="circleBar2_rt">纯色圆角框自适应宽高,把四个圆角切分成四个小块。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。</p>
</div>
</div>
</div>
<div class="circleBar2_lb" style="width:320px;">
<div class="circleBar2_rb">
<div class="circleBar2_lt">
<p class="circleBar2_rt">纯色圆角框自适应宽高,把四个圆角切分成四个小块。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。</p>
</div>
</div>
</div>
<div class="circleBar2_lb">
<div class="circleBar2_rb">
<div class="circleBar2_lt">
<p class="circleBar2_rt">纯色圆角框自适应宽高,把四个圆角切分成四个小块。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。你可以动态的改变它的宽高，或不设宽高让其自由排版，查看效果。</p>
</div>
</div>
</div>
<h1>五图法适应复杂图纹圆角宽高自适应(二维滑动门)</h1>
<div class="circleBar3">
<h2>二维滑动门精典圆角</h2>
<p class="circleBar3_y">五图法适应复杂图纹圆角宽高自适应(二维滑动门)五图法适应复杂图纹圆角宽高自适应(二维滑动门)五图法适应复杂图纹圆角宽高自适应(二维滑动门)五图法适应复杂图纹圆角宽高自适应(二维滑动门)五图法适应复杂图纹圆角宽高自适应(二维滑动门)五图法适应复杂图纹圆角宽高自适应(二维滑动门)</p>
<div class="circleBar3_bottom">
<p></p>
</div>
</div>
</div>
</body>
</html>
对应的效果图如下：代码中宽可随意更改，高设高度以是自适应。（注：滑动门处背景图应保证够长或宽以适应不同尺寸。）
所用的切片如下：
以上效果是灵活的，代码可自行做相应的更改！深夜2点了！还奋斗在抗战前线的同学们！晚安！我等先睡也！
