border image not showing in safari

问题:

border-image not showing up in Safari or on tablet and mobile devices. It's fine in FF, IE, Chrome and Opera.

Here's the 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>

and the css

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

A little more information: I'm using Bootstrap v3.0.3. The page is validating. In FireBug the borders are being brought through, colour, padding, but not the image.

回答1:

I found this post while looking for a solution for the same problem with Safari 10.0. I was able to find a solution and wanted to share it in case somebody has the same problem. The problem was fixed by removing the border shorthand property and replacing it with border-style and border-width.

Here is my code before, NOT working:

 .borderWrap{

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

And the new code working:

.borderWrap{

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

回答2:

In Safari Version 10.1.1 no border-image is displayed at w3schools.com now in June 2017. There is a border-image-generator at border-image dot com (I hope, I am allowed to mention this here!), that works great at least for Safari, chrome an ff for mac. My example:

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:

Are you checking this using the latest version of Safari? Safari didn't support border-image in versions before 5. Honestly though it would be best to add support to as many older browsers as possible by using the -o, -webkit and -moz tags. You can find out how to use these tags on the w3schools border-image page.

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

Generally speaking you just need to add the per browser prefix to the standard css code.

回答4:

I gave up on trying to get the border-image working properly. It's not supported well enough. So I changed it in to a background image and got that working fine.

This works in all but Safari and some devices:

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

But for it so work in Safari it needs to be this:

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

Moral of the story, stick with what works until they've perfected the new stuff.