一般背景图片平铺我们都会直接使用代码repeat-x或repeat-y，这个可以运用到纯色背景或是渐变有规律的背景，如果网站中需要圆角的背景图片，且可随着宽度自由拉伸，那么我们应该怎么做呢？
常规的方法都是直接把图片用ps做好，宽度也定好了，然后在css中直接插入背景图片，但是在宽度不一定的情况下，就不能这么做了。

<div>
<b></b><b></b><b></b><b></b>
<div>
<h3>圆角图片</h3>
<div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。</div>
</div>
</div>

/*圆角框通用设置样式，如果要运用多个不同颜色，以下部分不用重新变化——————————–*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1{margin:0 5px;}
.b2{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*图片偏移定位–上面部分*/
.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}
/*图片偏移定位–下面部分*/
.sharp .content h3{background-position:left -4px;}

/*颜色方案四,红色风格—————————————-*/
/*边框颜色*/
.color4 .b2,.color4 .b3,.color4 .b4,.color4 .b5,.color4 .b6,.color4 .b7,.color4 .content{border-color:#A81201;}
.color4 .b1,.color4 .b8{background:#A81201;}
.color4 h3{border-bottom:1px #A81201 solid;}
/*图片路径*/
.color4 .b2,.color4 .b3,.color4 .b4,.color4 h3{background:url(images/lan.jpg) repeat-x;}

这是个红色渐变的圆角案例，效果如下图

可根据实际情况更换渐变的图片，和边框颜色等，在做响应式设计时，如果需要做圆角背景，那么这种方法是十分有效的。

如果您有更好的方法，欢迎互相交流。