border-image-slice 在 Chrome 和 Firefox 中交换水平和垂直参数

Question

我试图用这段代码只做水平（/垂直）边框：

.test {
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), hsl(19, 0%, 75%), hsl(0, 0%, 97%));
   border-image-slice: 100% 1%;
}

它有效。但仅限于Chrome。铬

在火狐中，行交换方向。它们变为垂直：FF

如果我更改"边框图像切片：100% 1%;" 到"边框图像切片：1% 100%;"浏览器也会改变效果。

也许有人处理它？也许我错过了什么？也许存在跨浏览器解决方案。

Answer 1

您问题中的 CSS 不是您用于在 CodePen 中生成输出的整个 CSS。如果您将来提供指向它的链接，那将很有用。有了以下内容，我无法重现该问题。我在两个浏览器中都得到了两个水平边，所以我怀疑问题出在其他 CSS 上：

.HTML

<div class="repeating-linear">
</div>

.CSS

* {
  box-sizing: border-box;
}
body {
  background-color: #000000;
}
.repeating-linear {
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), 
        hsl(19, 0%, 75%), hsl(0, 0%, 97%));
    border-image-slice: 100% 1%;
}

请参阅： https://jsfiddle.net/0j745Lzm/1/