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。 Chrome

在Firefox线上交换方向。他们变得垂直： FF

如果我更改“border-image-slice：100％1％;” to“border-image-slice：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/

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

1 个答案: