CSS边框图像渐变不工作在Safari 5.1.7

Question

我参考此代码 CSS Border Image Gradient Not Working in Safari 10 但我想使用两种颜色组合的底部边框。 为此，我修改如下。

下面的代码 MAC的Safari浏览器的工作:: 9.1.2，10.0 MAC的镀铬:: 60， Windows的Mozilla的56 Windows的边缘。

.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>

当我写（ “右”），而不是（ “右键”）。那个时候它适用于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浏览器的其他版本。我认为这个bug已经在此期间，虽然得到纠正。）
（另请注意，我删除了-MS-前缀属性，因为它不存在。）

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

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个安全问题。有更好更安全的浏览器。