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

我引用这个代码 但是我想用两种颜色组合作为底边。 为此，我对其进行了如下修改

下面的代码在中工作 Mac-Safari:：9.1.2，10.0 Mac-Chrome:：60， Windows-Mozilla 56。 窗口-边缘

.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底部{
边框顶部：0px；
右边框：0px；
左边框：0px；
边框底部：1px；
边框底部样式：实心；
线高：1；
垫底：7px；
边界图像：线性梯度（向右，#002159 25%，#939494 15%）5；
-moz边框图像：-moz线性渐变（向右，#002159 25%，#939494 15%）5；
-webkit边框图像：-webkit线性渐变（向右，#002159 25%，#939494 15%）5；
-o-边界图像：-o-线性梯度（向右，#002159 25%，#939494 15%）5；
-ms边框图像：-ms线性渐变（向右，#002159 25%，#939494 15%）5；
}

---

登录

Safari 5有一个错误，使用

边框图像

会覆盖元素的背景。也就是说，它不使用元素的

背景色

属性，而是使用

边框图像

本身，实际上是对所有内容进行绘制。
在Safari 5和其他浏览器之间比较此代码段

body{font size:16px}
.蓝灰色底纹{
边界：0无；
边框底部：1px实心透明；
线高：1；
垫底：7px；
背景色：白色；
-webkit边框图像：-webkit线性渐变（左，#002159 25%，#939494 15%）5；
-moz边框图像：-moz线性渐变（向右，#002159 25%，#939494 15%）5；
-o-边界图像：-o-线性梯度（向右，#002159 25%，#939494 15%）5；
边界图像：线性梯度（向右，#002159 25%，#939494 15%）5；
}

登录

为什么要支持这样一个旧版本？无论如何，编写这种样式的最好方法是将

边框图像

放在最后，在所有前缀的下面。如果您将-webkit-one定制为Safari 5.1，那么它可能会在其他浏览器中工作。李斯特先生，这是客户端的要求。正如你建议把边界图像放在最后，我也试过了，但它对我无效。嗨，李斯特先生，谢谢你的回答，它对我有效。虽然它不是边框图像。：）正如您所说，（还请注意，我删除了-ms prefixed属性，因为它不存在）基本上它用于Internet Explorer浏览器，请查看此答案是的，但MSDN上的页面上显示不要显式使用Microsoft供应商前缀（“-ms-”）。前缀仅用于上指定的以-ms-开头的属性和函数。因此没有

-ms边界图像

或

-ms线性梯度

。