在学习了基本background-clip和background-origin用法和原理之后，我们将通过操作一个实际的例子，来加深我们的学习：
这个圆角背景是由三部分组成：
和
和
(呃，其实是从Webqq2.0网站上撬下来的，就是上面的工具条……但是作为教学用，应该无伤大雅吧……)，思路和开篇的那个黑背景制作过程是一样的，左右固定，中间窄的repeat-x。但是这会不用插入三个div，又要设置float,又要设置display考虑布局那么麻烦。
步骤一：
先搭建一个框架出来，给一个布局。不着急把图片插入进去。主意看以下代码，有几点需要说明的：因为仅需在盒子左右两侧插入背景，且恰好为左右要插入图片的宽度(如果不恰好为那么宽呢？那么不会成功的，因为css3中还没有属性能控制图片在边框中的定位，你会想不是有background- position属性吗？要注意那个是控制图片在整个盒子中的定位。还是不信的话你可以亲自试试)；还有就是padding的值也是可以不用设置的，是为了与上面的例子尽力保持一致，方便大家对比学习 margin也是为了让盒子居中而已，可以忽略；最后border-style和border-color也是方便大家理解布局才添加上去的。
.border
{
background:black;
border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因为要适应图片，所以宽度改小一点*/
padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/
margin:0 auto;
}
步骤二：
这一步很简单，就是把中间需要x轴重复的图片添加上去，并且把黑色背景去掉
.border
{
background:url(“images/tool-bar/bg_b_c.png”);/*添加背景*/
background-repeat:repeat-x;
background-position:center;
border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因为要适应图片，所以宽度改小一点*/
padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/
margin:0 auto;
}
