边界不透明且具有线性渐变

Question

为什么当我将透明边框应用于线性渐变的div时，边框的上下两端都不透明。

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

}

Answer 1

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

这是可行的原因：

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

Answer 2

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

TLDR

background-origin: border-box;