边框图像未在 Safari 中显示答案

【问题标题】：border image not showing in safari边框图像未在 Safari 中显示
【发布时间】：2020-07-10 11:12:23
【问题描述】：

border-image 未在 Safari 或平板电脑和移动设备上显示。在 FF、IE、Chrome 和 Opera 中都可以。

这是 HTML：

<div class="col-sm-4 ctas" id="togglelinks">
    <div class="rooms">
        <img src="images/bedroom1.jpg" alt="" class="img-responsive" />
        <h6>Room 1</h6>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
        <p><a class="btn togglee" target="one">MORE INFORMATION</a></p>
    </div>
</div>

和css

.rooms {
    border: 15px solid transparent;
    color: #fff;
    padding: 5px;
    border-image: url("../images/paint-blk.png") fill 21 repeat;
}

更多信息：我使用的是 Bootstrap v3.0.3。该页面正在验证。在 FireBug 中，边框被带入，颜色，填充，但不是图像。

【问题讨论】：

标签： html safari css

【解决方案1】：

我在为 Safari 10.0 寻找相同问题的解决方案时发现了这篇文章。我能够找到解决方案并想分享它，以防有人遇到同样的问题。该问题已通过删除边框速记属性并将其替换为边框样式和边框宽度来解决。

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

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

【讨论】：

感谢您的回答，我发现显然是“透明”属性使边框不显示在 Safari 中。将其更改为“继承”使其工作。
更改颜色以继承对我也不起作用。但是添加一个浅透明的颜色做了 rgba(0,0,0,0.01)。但需要有一个大于 0 的 alpha 值。
@dardub 对我有用。也许你应该建议作为答案。你肯定有我的投票。
@not2savvy 结合这个答案对我很有用。

【解决方案2】：

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

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;

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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;
}

故事的寓意，坚持有效的方法，直到他们完善了新东西。

【讨论】：

【解决方案5】：

我只使用了一种随机颜色，而不是透明或继承，它适用于 safari。

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

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

【讨论】：