0

我正在尝试使用此代码仅制作水平（/垂直）边框：

.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。铬合金

在 Firefox 行交换方向。它们变成垂直的： FF

如果我更改“border-image-slice: 100% 1%;” 到“边框图像切片：1% 100%；” 浏览器也会改变效果。

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

4

1 回答 1

0

您问题中的 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/

于 2016-07-07T12:42:35.057 回答