Safari 和 Mobile Safari 是否错误地渲染带有半径和填充的圆形边框？答案

【问题标题】：Are Safari & Mobile Safari rendering rounded borders with radius and padding incorrectly?Safari 和 Mobile Safari 是否错误地渲染带有半径和填充的圆形边框？
【发布时间】：2013-10-18 16:33:20
【问题描述】：

当您将边框半径、填充和边框组合在一起时，Safari 和 Mobile Safari 似乎会出现问题。在 Chrome 和 Firefox 中运行良好。

HTML：

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS：

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

示例：http://jsfiddle.net/ucNwx/2/

是我的错还是 Safaris？我该如何解决？

【问题讨论】：

删除填充似乎可以修复内部空白。为什么是500pxborder-radius？
50%的边框半径有问题吗？ jsfiddle.net/ucNwx/3
@Mooseman 是的，但我想要填充边框效果:) 高边框半径可以创建一个圆圈
@cimmanon 谢谢，这是创建圈子的更好方法 :)
@eteubert 是的，但它似乎在渲染时没有考虑border-radius。不确定这是否是旧版 WebKit 的错误...

标签： safari mobile-safari padding css

【解决方案1】：

我敢打赌这是 Safari 错误：border-radius 应用较晚并产生剪辑效果。幸运的是，box-shadow 渲染正确，所以让我们使用它：

border-radius: 50%;
box-shadow:
  0 0 0 3px white,
  0 0 0 4px #999;

Works 在 iPad 和 OS X 上的 Safari 6 上。

【讨论】：

不错！ OS X Safari 中仍然存在渲染问题，但 Mobile Safari 现在可以很好地渲染。

【解决方案2】：

我现在能想到的最佳解决方案：http://jsfiddle.net/ucNwx/5/

使用包装器 div 绘制边框，然后将图像放入其中。右侧边缘仍有一些伪影，但我猜这是 Safari 的错误。

HTML

<div class="border-container">
    <img src="http://lorempixel.com/200/200/animals/3/" />
</div>

CSS

.border-container {
    width: 206px;
    height: 206px;
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    border: 1px solid #999;
    margin: 10px
}

img {
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    width: 200px;
    height: 200px;
    margin: 3px;
}

【讨论】：