边境图像没有在野生动物园中显示

Question

边框图像未显示在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中,边框正在通过,颜色,填充,但不是图像.

Answer 1

我在寻找Safari 10.0同样问题的解决方案时发现了这篇文章.我能够找到一个解决方案,并希望分享它,以防有人遇到同样的问题.通过删除边框速记属性并将其替换为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 代码中即可。