CSS3教程：background-clip和background-origin

走进CSS3的新世界：深入了解background-clip与background-origin属性

在CSS3中，background-clip与background-origin这两个新属性为我们提供了更精细的背景定位与控制。它们属于CSS3背景模块，用于确定背景的定位和显示范围。

让我们理解background-clip属性。这个属性决定了背景是否包含border区域。如果设置为padding值，背景将忽略padding边缘，border区域将会是透明的。反之，如果设置为border值，背景将包括border区域。对于多背景的图像，每个背景图像都有自己的background-clip值，它们之间用逗号分隔。

接着是background-origin属性，它决定了background-position计算的参考位置。如果设置为padding值，位置将相对于padding边缘。如果是border值，则相对于border边缘。而content值则表示相对于内容边缘。与background-clip一样，多个值的设置也用逗号分隔。

在默认情况下，background-clip的表现类似于background-clip:border，而background-origin则类似于background-origin:padding。对于IE浏览器，尤其是IE6和IE7，其行为略有不同。对于一般元素（不包括button等），其背景相当于background-clip:border; background-origin:border;，而对于具有hasLayout属性的元素（包括button等），其背景则相当于background-clip:padding; background-origin:padding;。

值得注意的是，这两个属性在Mozilla, Safari 3和Konqueror等浏览器中已实现，它们的私有属性表达方式分别以-moz-，-webkit-和-khtml-开始。换句话说，为了在这些浏览器中使用这些属性，我们需要使用它们的私有版本，如moz-background-clip，webkit-background-clip，khtml-background-clip，moz-background-origin，webkit-background-origin以及khtml-background-origin。

background-clip和background-origin为CSS3背景处理提供了强大的工具，使我们能够更精细地控制背景的显示和定位。尽管IE浏览器在某些情况下的行为略有不同，但这两个属性已经在许多现代浏览器中得到了实现。随着CSS3的普及，我们期待看到更多精彩的背景设计。