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;会更改背景图片的确切应用范围-默认情况下是元素的填充框。添加的边框在该填充框之外创建了空间，但仍在整个元素的范围内，因此您的渐变会在这些区域中重复出现。

因此，您可以使用background-origin: border-box;

通过明确指定要使整个边框框为背景定位区域来解决此问题。

#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>

透明的边框图像会翻转基础背景颜色的渐变吗？

1 个答案: