Html 具有线性渐变的边框不透明

为什么当我将透明边框应用于具有线性渐变的div时，边框在顶部和底部都不透明

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid transparent;

}

截图

---

你需要使用这样的东西

div{
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid rgba(0,0,0,0.3);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

---

@dimann90在注释中有正确的解决方案。对元素使用

background repeat:no repeat

这就是为什么这样做的原因：

---

默认情况下，背景图像在x和y方向上无限重复。线性渐变是背景图像，该图像的大小由内容框的大小控制（实际上是，但这对于我们的目的来说已经足够好了）。元素的背景通过填充和边框（而不是边距）延伸。因此，边框将导致元素框的总大小大于生成的背景图像，并将重复。如果边框是透明的，则重复图像将显示出来。

对于正在寻找解决方案的任何人：

TLDR

background-origin: border-box;

---

解释

我不明白你想说什么。是的。它起作用了。但为什么透明边框显示不正确？这是一个错误？对于透明边框，您必须使用RGB代码，如rgba（0,0,0,0.3）0.3是透明度的大小，这要容易得多。使用“no repeat”（无重复）看起来很好，这类方法解决了问题，但由于某些原因，当设置

无重复时，OSX上的Chrome会丢失抗锯齿功能。另外，我个人使用透明边框的原因是，该元素与带有边框的元素具有相同的尺寸（我有两个并排的按钮，一个带有渐变bg，一个带有透明bg和边框）。当设置不再有效的
no repeat
时（带边框的透明按钮现在比另一个按钮的
边框宽度大），也许您可以用更多的上下文来扩展您的答案为什么这是一个解决方案以及它是如何工作的（最好用一个代码片段示例）？确保在
后台
css属性之后添加
后台原点
，否则将无效。
background-origin: border-box;