safari中未显示边框图像

border-image未在Safari或平板电脑和移动设备上显示。在FF，IE，Chrome和Opera中都很好。safari中未显示边框图像

这里的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; 
}

多一点信息：我使用的是引导v3.0.3。该页面正在验证。在FireBug中，边界正在穿过，颜色，填充，但不是图像。

来源

2014-01-09 JCooke

您是否使用最新版本的Safari检查此问题？ Safari在5之前的版本中不支持边界图像。尽管最好通过使用-o，-webkit和-moz标记尽可能多地为更老的浏览器添加支持。您可以了解如何在w3schools边框图像页面上使用这些标签。

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

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

来源

2014-01-09 16:11:11 nemesiswho

我放弃了试图让边界图像正常工作。它不够好。所以我把它改成了背景图片，并且工作得很好。

这适用于所有，但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; 
}

这个故事告诉我们，坚持什么作品直到他们完善了新的东西。

来源

2014-01-10 10:21:16 JCooke

我发现这篇文章，同时寻找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; 
}

来源

2016-10-28 17:05:32 roco15

感谢您的回答，我发现它显然是“透明”的属性，使边框不会出现在Safari中。将其更改为“继承”使其发挥作用。 – not2savvy

将颜色更改为继承对我也不起作用。但添加一个透明的颜色做了rgba（0,0,0,0.01）。但是需要一个大于0的alpha值。 – dardub

在Safari版本10.1.1无边框图像在w3schools.com现在显示2017年6月。在border-image dot com上有一个边界图像生成器（我希望，我可以在这里提及这个！），这对于Safari来说非常有效，对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;

来源

2017-06-24 10:28:41 Mary

safari中未显示边框图像

回答

相关问题