为什么线性渐变在Edge中不起作用？

Question

我定了等级。这适用于Firefox和Chrome。但是在Edge中，渐变无效。我提到了诸如Autoprefixer和MDN之类的工具和文档，但无法找出原因。

如何解决Edge中的此错误？

.grad {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

Answer 1

您检查它是否有填充物。如果单击确定，则可以在哪里看到填充和边距属性。或者，您尝试从Internet工具获得渐变。

或问题在于浏览器。边缘不是最好的。

.grad {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

Answer 2

linear-gradient规范中的两个相邻位置无法理解。因此，应将linear-gradient(..., #000 6px calc(6px + var(--w)), ...)替换为linear-gradient(..., #000 6px, #000 calc(6px + var(--w)), ...)。

下面的演示，在Edge 44（18）上可以正常工作。

span {
  --w: 3px;
}
.grad {
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px, #000 calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>