边框使用线性渐变后不透明

Question

为什么当我给带有线性渐变的div应用透明边框时，边框在顶部和底部不透明。

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

}

screenshot http://i43.tinypic.com/2r3gjmx.png

- dimann90

---

我不明白你想说什么。 - Arpit Srivastava

Answer 1

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

简而言之

background-origin: border-box;

解释 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin

- visitor

---

也许您可以在回答中加入更多的上下文，解释为什么这是一个解决方案以及它是如何工作的（最好附带代码示例）？ - Filnor

请确保在background CSS属性之后添加background-origin，否则它将没有任何效果。 - Patronaut

Answer 2

@dimann90在评论中给出了正确的解决方案。在元素上使用background-repeat: no-repeat。

这是为什么会起作用：

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

- Heston Liebowitz

---

这种方法解决了问题，但在Chrome上的OSX中设置“no-repeat”时会丢失抗锯齿功能。此外，我个人使用透明边框的原因是使该元素具有与带有边框的元素相同的尺寸（我有两个并排的按钮-一个具有渐变背景，一个具有透明背景和边框）。当设置“no-repeat”时，它不再起作用（具有边框的透明按钮现在比另一个大出其“border-width”）。 - powerbuoy

Answer 3

你需要使用类似这样的东西

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;
}

- Roy Sonasish

---

是的，它能够运行。但为什么透明边框显示不正确？这是一个错误吗？ - dimann90

对于透明边框，您需要使用RGB代码，例如rgba（0,0,0,0.3） - Roy Sonasish

0.3 是透明度的值。 - Roy Sonasish

使用“no-repeat”，它看起来很好，更容易。 - dimann90