html - 线性渐变边框不透明

Question

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

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

}

截图 http://i43.tinypic.com/2r3gjmx.png

Answer 1

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

TLDR

background-origin: border-box;

说明 https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Answer 2

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

这就是为什么它有效：

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

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