html - 透明边框图像翻转底层背景颜色的渐变？

Question

我正在尝试将边框图像添加到已经具有渐变背景颜色的标签，但我发现边框的顶部和底部位渲染渐变不正确。这是一个片段:

#button {
  padding: 1.5vh 3vw;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;

  background: linear-gradient(to bottom, #A6E8B3, #3DBD8F);

  border: 10px solid;
  border-image: url('https://mdn.mozillademos.org/files/4127/border.png') 30;
  border-image-repeat: round;
  border-radius: 1vw;
}

<a id="button">Button</a>

我的意图是让整个圆形区域成为一个从下到上的平滑渐变，边框环绕边缘。似乎不影响左边框或右边框后面的背景部分，只影响顶部和底部。

谢谢。

Answer 1

问题是添加 border: 10px solid; 会改变应用背景图像的确切对象 - 默认情况下是元素的 padding box。添加的边框在该填充框外创建了空间，但仍在整个元素的边界内，因此您的渐变会在这些区域重复。

因此，您可以通过使用background-origin: border-box;明确指定您希望整个边框作为背景定位区域来解决此问题。 p>

#button {
  padding: 1.5vh 3vw;
  font-size: 3.5vh;
  font-weight: bold;
  text-align: center;

  background: linear-gradient(to bottom, #A6E8B3, #3DBD8F);

  border: 10px solid;
  border-image: url('https://mdn.mozillademos.org/files/4127/border.png') 30;
  border-image-repeat: round;
  border-radius: 1vw;
  background-origin: border-box;
}

<a id="button">Button</a>