今天小编跟大家讲解下有关在css3中background-clip属性与background-origin属性的用法介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关在css3中background-clip属性与background-origin属性的用法介绍 的相关资料，希望小伙伴们看了有所帮助。
困惑在哪里
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性 它们有相同的可选值 即border、padding、content三种 而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。
比如 我们想要在边框上显示背景 我们可以使用background-origin帮我们实现（前提是边框要是透明的 不然它会覆盖住背景）
这里为了既体现出边框 又体现出边框中的背景 我特意使用了虚线的边框。(我是在chrome上做的demo,所以css3属性只使用了webkit前缀)
运行效果如下：
我们看到黑色部分是虚线的边框（因为边宽宽度很大 所以虚线看起来怪怪的） 虚的地方正好露出了背景。
所以使用background-origin能够把背景显示的边框上。那background-clip又是做什么滴捏
很多书上或文章上的解释是background-clip是用来控制背景的显示范围的 那么是不是background-clip也可以让背景显示在边框上呢 那就试试咯
还是用上面的代码 不过这回是把里面的background-origin改为background-clip
然后看下运行结果：
我们看到背景并没有在边框上显示 看来background-clip并没有这个功能。那这货到底有什么用呢
元芳 关于background-clip与background-origin这两个东西 你怎么看
大人 经过明察暗访 卑职已经摸清了这二人的底细 容卑职慢慢道来。
首先来看background-clip, mozilla官网上的解释是：
这解释还是很让人蛋疼 义译过来大概就是规定背景图片或颜色是否能在边框下显示。但前面已经说了 把background-clip设为border是没任何效果的。事实上 background-clip的默认值就是border
其实background-clip的真正作用是决定背景在哪些区域显示。如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content 则背景只会在内容区域显示。
那为毛前面的background-clip:border不起作用 这就得说说background-origin了
这回还是不看什么官网啊手册啊什么的了 我直接说说我的理解。
background-origin是指背景显示的区域 或者说背景是从哪个区域开始绘制的(边框、补白或内容区域)。
还不理解的话那就这么来说吧 background-position总该知道吧 它指定了背景的位置 比如background-position:0px 0px ；那这个0像素是指相对于哪里来说的呢 这就涉及到一个参照点的问题了。background-origin的作用就是指定background-position的参照点是在边框区域的左上角 还是在补白区域的左上角 或是在内容区域的左上角 对应的三个值就分别是border、padding、content. background-position的也可以是left、right等方向词语 这时候就不能说参照点了 而应该说参照面 如果值为background-origin的值为border,则参照面包括边框区域、补白区域、内容区域三个部分 如果值为padding,则参照面只包括补白区域和内容区域 如果值为content,则不用我讲了吧。
这个时候再来看看前面那个问题就豁然开朗了 你把background-clip设为border,这时候边框里是能显示背景的 但问题是背景并不是从边框的左上角开始绘制的 它是从补白区域才开始绘制的 女神背景压根就没想要搭理潘勘呖颍潘堪诔鲆桓龌潮Ю从优裼钟懈銎ㄓ冒。辖粝溉砼馨伞background-origin的默认值是padding,也就是默认从补白区域开始绘制背景。
但潘恐沼心嫦眨径傥藁胤凼保北涑珊谀径裨倮赐痘乘捅保潘恳餐耆梢运狄簧翰唬
所以当background-origin的值为border 而background-clip的值为padding时 虽然背景是从边框区域开始绘制的 但因为设定了边框不显示背景 所以本来属于边框的那一部分背景就不会显示出来 就好像背景图片被裁剪了一部分一样。看下代码：
效果如下：
最后总结一下
background-clip：border|padding|content
该属性指定了背景在哪些区域可以显示 但与背景开始绘制的位置无关 背景的绘制的位置可以出现在不显示背景的区域 这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
background-origin：padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置 你可以用这个属性在边框上绘制背景 但边框上的背景显不显示出来那就要由background-clip来决定了
来源：爱蒂网
