深入浅出CSS3 background-clip,background-origin和border-image教程 _css3_CSS_网页制作_

设置background-origin之后的效果图：

　　因为是在火狐下做的测试,所以-moz-background-origin代替background-origin,相应的属性所以也去掉了-box　　

　　效果和作用已经一目了然了：我们看到，当background-origin的值为content-box时，首先会让背景图片的左上角和内容边缘左上角对齐，padding-box时，则会让背景图片的左上角和内边距的左上角对齐。以此类推。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示。但话说回来，如果我没有设置任何的background-origin属性的话，它默认的起始位置在哪呢？这里就不演示了，但有必要记住——padding。

　　background-origin属性就先介绍到这里。应该不难吧。下面继续介绍background-clip。之所以没有把这两个属性分为两节分别介绍，因为实战的经验告诉我这两个属性应该是相互搭配才能相得益彰。

　　clip原意为裁剪，截取。同样顾名思义，background-origin的作用为将背景图片做适当的裁剪，以适应需要。当然这里并不是真正意义上的把图片给裁剪了，而是根据属性值。把图片的某些部位做适当的隐蔽。background-clip与origin的可选择一样，也是有content- box,padding-box,border-box(要注意在火狐和Chrome和Safari中，需要使用私有属性，加上-mox-和 -webkit-,这里就不赘述了，参考解释background-clip的内容)。怎样个剪裁法呢。根据你设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。举个具体例子，图片起始位置和上面的例子一样，比如是从border-box开始，但我background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容统统不可见。尽管你是让图片从边框开始显示。实例如下

　　正如以上所说，我们可以看见虽然图片是从顶着边框的左上角进行定位，但是裁剪属性background-clip的属性是设置为content-box,所以只有content区域的内容看得见，也就是只要是在content之外的图片内容都被隐蔽掉了。

　　我之所以要在不同浏览器下进行测试( Firefox/3.6.3，Google：7.0.517.24，Opera/9.80,Safari：5.0.1)，答案也在图上，我们看到在火狐下的结果和其他浏览器结果竟然不一样。明明background-clip设置的属性是content-box，但却没有图片的任何部位被屏蔽。我想说的是：在火狐下-moz-background-clip属性是没有content这一值的(但是padding和border还是有的)，在firebug中可以看到，-moz-background-clip的值直接是border，当你强行改为content时，这条属性会直接从bug中消失。当然这只是在 3.6.3版本下的结果，至于在4.0版本中表现如何(虽然只是beta版)。可以自行测试

四．实战

　　在学习了基本background-clip和background-origin用法和原理之后，我们将通过操作一个实际的例子，来加深我们的学习：

　　　　　　　　　　　　　　　　　　

这个圆角背景是由三部分组成：和和(呃，其实是从Webqq2.0网站上撬下来的，就是上面的工具条……但是作为教学用，应该无伤大雅吧……)，思路和开篇的那个黑背景制作过程是一样的，左右固定，中间窄的repeat-x。但是这会不用插入三个div，又要设置float,又要设置display考虑布局那么麻烦。

步骤一：

先搭建一个框架出来，给一个布局。不着急把图片插入进去。主意看以下代码，有几点需要说明的：因为仅需在盒子左右两侧插入背景，且恰好为左右要插入图片的宽度(如果不恰好为那么宽呢？那么不会成功的，因为css3中还没有属性能控制图片在边框中的定位，你会想不是有background- position属性吗？要注意那个是控制图片在整个盒子中的定位。还是不信的话你可以亲自试试)；还有就是padding的值也是可以不用设置的，是为了与上面的例子尽力保持一致，方便大家对比学习 margin也是为了让盒子居中而已，可以忽略；最后border-style和border-color也是方便大家理解布局才添加上去的。