边框图像在 Safari 中不显示

Answer 1

我在寻找 Safari 10.0 相同问题的解决方案时发现了这篇文章。我找到了解决方案，并希望分享它，以防有人遇到同样的问题。通过删除 border 简写属性并将其替换为 border-style 和 border-width 解决了该问题。

这是我之前的代码，不起作用：

 .borderWrap{

    border: solid 34px transparent;
    border-image: url(../images/spriteOneFrame.png) 34 34 round;
 }

新代码可以运行：

.borderWrap{

    border-style: solid;
    border-width: 34px;
    border-image: url(../images/spriteOneFrame.png) 34 34 round;
}

Answer 2

2017 年 6 月，在 Safari 版本 10.1.1 中，w3schools.com 上不再显示边框图像。 border-image dot com 上有一个边框图像生成器（我希望我可以在这里提及这一点！），至少对于 Safari、chrome 和 ff for mac 来说效果很好。 我的例子：

border-style: solid;
border-width: 5px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;

Answer 3

您是否使用最新版本的 Safari 进行检查？ Safari 在 5 之前的版本中不支持 border-image。老实说，最好通过使用 -o、-webkit 和 -moz 标签来添加对尽可能多的旧浏览器的支持。 您可以在 w3schools border-image 页面上了解如何使用这些标签。

http://www.w3schools.com/cssref/css3_pr_border-image.asp

一般来说，你只需要将每个浏览器的前缀添加到标准CSS代码中即可。

Answer 4

我放弃了让边框图像正常工作的尝试。它的支持不够好。所以我将其更改为背景图像并且工作正常。

这适用于除 Safari 和某些设备之外的所有设备：

.rooms {
    color: #fff;
    background: url("../images/paint-blk2.png") 0 0 / 100% 100% no-repeat;
    padding: 25px;
    height:410px;
}

但是为了在 Safari 中工作，它需要是这样的：

.rooms {
    color: #fff;
    background: url("../images/paint-blk2.png") no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    height:410px;
}

这个故事的寓意是，坚持有效的做法，直到他们完善新东西。

Answer 5

我没有使用透明或继承，而是使用了随机颜色，并且它在 safari 上有效。

边框图像刚刚覆盖了我设置的图像。我仍然会使用良好的后备颜色，以防边框图像在旧版浏览器上不显示。

border: 10px solid blue !important;
border-image: url(/myImage.png) 20% stretch;

Answer 6

可以确认。代码来自此，不起作用：

border-style:solid;
border-width:40px;
border-color:transparent;
border-image: url(images/xmas-border2.png) 25% round;
border-image-outset:8px 10px 5px;

为此，在 Safari 13 上工作：

border-style:solid;
border-width:40px;
border-color:#fff;
border-image: url(images/xmas-border2.png) 25% round;
border-image-outset:8px 10px 5px;