safari - Safari 和 Mobile Safari 是否不正确地渲染带有半径和填充的圆形边框？

Question

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

<-- 预期

<-- Safari 渲染

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？我将如何解决它？

Answer 1

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

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

适用于 iPad 和 OS X 上的 Safari 6。

Answer 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;
}