logo标签列表

边框图像在Safari中无法正确地圆角。

csssafari
8
这是我的jsfiddle示例： http://jsfiddle.net/9TWHF/1/ 
#bigdescription{
    width: 66%;
    border-style: solid;
    border-width: 87px 78px 81px 79px; 
    -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round; 
    -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round;
    -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 round; 
    border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 78 81 79 fill round; 
}

Firefox: 在此输入图片描述

Safari: 在此输入图片描述

您可以在底部边框上最清楚地看到。在除Safari以外的所有浏览器中，底部边框都正确地圆角。在Safari中，它似乎根本没有圆角。有什么想法是为什么会发生这种情况吗？

编辑：据我所知，Safari实际上不支持border-image上的“round”重复样式（尽管他们的文档说他们支持：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html）

可能是渲染时的亚像素/四舍五入差异，因为您在宽度上使用了百分比，但图像尺寸是以像素值表示的。 - Paulie_D
我尝试使用像素值明确设置宽度，但它仍然无法取整 :( - user688518
Safari on Mac or on Windows? - yunzen
Safari在Mac和iOS上。一定是一个Webkit问题。 - user688518
我在Safari-Mac上遇到了类似的问题，但不是粗糙的切割，而是图像被拉伸过度。 - wabisabit
这个 Safari 的 bug 在 2021 年还没有修复吗？ - Corey
4个回答
3
固定宽度是什么意思？ - Corey
基本上是使用类似于“px”值的静态值来设置宽度。如果您查看问题，它们有width: 66％;，因此该宽度是动态的，这意味着它可以随页面/父级宽度而改变。此线程中的其他答案使用具有px值的宽度。因此，我认为width: 350px;是静态或固定宽度。 - Jason Lydon
很奇怪，这对我在Safari中的问题没有起作用。 - Corey
1
这是我能做到的最接近正确和流畅的外观。
#bigdescription{
width: 353px;
border-style: solid;
border-width: 87px 64px 76px 89px; 
-webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
   -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
     -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round; 
        border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 64 76 89 round;
}

我改变了一些宽度和边框圆角属性。
0

新增到 @Piyush-Marvaniya 的回答中

这似乎是由于百分比宽度的像素舍入误差导致的。在固定宽度下，您可以获得类似其他浏览器的边框。

以下是 Saf v5.0 (7533.16)/Win 中的工作示例，链接为 jsfiddle。 我已经使它几乎完美，边框下曲线有一个像素的毛刺，但您必须非常仔细才能意识到：

#bigdescription {
    width: 350px;
    border-style: solid;
    border-width: 87px 69px 76px 89px; 
    -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
       -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
         -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round; 
            border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 76 89 round;
}
-1
尝试这个CSS。
#bigdescription{
        width: 66%;
        border-style: solid;
        border-width: 87px 69px 77px 89px; 
        -moz-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        -webkit-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        -o-border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 round; 
        border-image: url(http://i.imgur.com/nJ71Mj5.png) 87 69 77 89 fill round; 
    }
不行，仍然没有四舍五入，曲线也不匹配。 - user688518
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接