css - Safari 切割图像中的边框图像？

Question

我有一个边框图像，它工作正常，但在 safari 中不行。

在谷歌浏览器中:

在 Safari 中:

如您所见，边框图像在 safari 中被剪切。有什么建议么？ CSS 代码:

border:40px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 round;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 round;
border-left:0;
border-right:0;
border-bottom:0;
width:500px;
height:100px;
margin-top:100px;
background-color:white;

Answer 1

下面的帖子提供了一些关于 Safari 中边框图像问题的有用信息:

border-image rounding not rounding correctly in Safari

简而言之，我认为 Safari 并不真正支持“round”属性，而是默认为“repeat”。

一种可能的解决方案是使用与您希望顶部边框大小完全相同的图像。例如，如果您希望上边框恰好为 500 像素宽和 40 像素高，则使图像“ruler.png”恰好为该尺寸。