CSS 边框图像渐变在 Safari 5.1.7 中不起作用

Question

我引用这段代码 CSS Border Image Gradient Not Working in Safari 10但我想为底部边框使用两种颜色组合。为此，我对其进行了如下修改。

下面的代码在Mac-Safari::9.1.2、10.0Mac-Chrome::60，Windows-Mozilla 56。Windows- Edge。

.bluegray-line {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -o-border-image: -o-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
}

但它在 Safari 5.1.7 中无法正常工作

.bluegray-bottom {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

<div class="bluegray-bottom">LOG IN</div>

当我写 ("right") 而不是 ("to right") 时。那时它适用于 Safari 5.1.7，但不适用于其他浏览器。

Answer 1

Safari 5 有一个错误，即使用 border-image 会覆盖元素的背景。也就是说，它不是使用元素的 background-color 属性，而是使用 border-image 本身，实际上是在所有内容上绘制。
在 Safari 5 和其他浏览器之间比较此代码段。

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background-color:white;
    -webkit-border-image: -webkit-linear-gradient(left, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

<div class="bluegray-bottom">LOG IN</div>
  

(请注意，我这里没有 Mac 或 iPad，所以我无法测试其他版本的 Safari。不过，我假设错误已在此期间得到纠正。)
(另请注意，我删除了 -ms-prefixed 属性，因为它不存在。)

一种解决方法是使用背景属性而不是边框​​颜色。您可以将背景图像放置在元素中您想要的任何位置，因此如果您知道字体大小，则可以准确计算出背景需要放置的位置。

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background: white -webkit-linear-gradient(left, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -moz-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -o-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

<div class="bluegray-bottom">LOG IN</div>
  

顺便说一下，现在使用 Safari 5 不是个好主意。 This site说它至少有 121 个安全问题。有更好、更安全的浏览器。