background-clip：border-box的行为类似于padding-box

Question

我正在使用background-clip属性来查看其三个值的效果。

几分钟前，值border-box停止显示图像。也就是说，它是在外边框的边缘开始图像，但现在它在边框内但在padding-box的末尾开始。

请参阅代码here on github和JS fiddle here。

在我的浏览器中，它们都显示如下：

如您所见，border-box属性的值为background-clip的第一个框不会在外边框的边缘显示图像。它的行为与padding-box完全相同。

以下是为方便起见的代码。

div {
  margin: 50px;
  border-style: solid;
  border-color: rgba(255, 255, 0, 0.7);
  border-width: 50px;
  padding: 20px;
  width: 200px;
  height: 300px;
  float: left;
  background-image: url("https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
  background-repeat: no-repeat;
  background-color: rgba(120, 210, 180, 0.65);
  color: white;
  font-size: 2em;
}

.default {
  background-clip: border-box;
}

.paddingBox {
  background-clip: padding-box;
}

.contentBox {
  background-clip: content-box;
}

<div class="default">background-clip: border-box</div>
<div class="paddingBox">background-clip: padding-box</div>
<div class="contentBox">background-clip: content-box</div>

有趣的是，如果我注释掉background-repeat: no-repeat，则所有background-clip值的行为都应该如此。请看下面的图片。

div {
  .. 
  /* background-repeat: no-repeat; */
}

W3C CSS 3 Specification未说明background-clip和background-repeat属性之间的任何关系。

IP注意：我获得了图片from here并对其进行了修改。

Answer 1

在MSDN上指定：

  

background-clip CSS属性指定元素的背景（无论是颜色还是图像）是否在其边框下方延伸。

此处的关键字扩展，示例中的背景不会扩展到任何位置，因为您设置了background-repeat: no-repeat。这里的混淆来自背景的起源，由background-origin - 属性指定，默认为padding-box。

如果您将background-origin与background-clip一起设置，则会得到您正在寻找的结果。

div {
  margin: 50px;
  border-style: solid;
  border-color: rgba(255, 255, 0, 0.7);
  border-width: 50px;
  padding: 20px;
  width: 200px;
  height: 300px;
  float: left;
  background-image: url("https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
  background-repeat: no-repeat;
  background-color: rgba(120, 210, 180, 0.65);
  color: white;
  font-size: 2em;
}

.default {
  background-clip: border-box;
  background-origin: border-box;
}

.paddingBox {
  background-clip: padding-box;
  background-origin: padding-box;
}

.contentBox {
  background-clip: content-box;
  background-origin: content-box;
}

<div class="default">background-clip: border-box</div>
<div class="paddingBox">background-clip: padding-box</div>
<div class="contentBox">background-clip: content-box</div>