是Safari＆amp; Mobile Safari渲染圆角边框，半径和填充不正确？

Question

当您组合边框半径，填充和边框时，Safari和Mobile Safari似乎有问题。适用于Chrome和Firefox。

＆lt; - 预期

＆lt; - 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/

是我的错还是狩猎？我该如何解决？

Answer 1

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

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

iPad和OS X上Safari 6上的

Works。

Answer 2

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

使用包装器div绘制边框，然后将图像放在其中。在右边缘仍然有一些文物，但我猜这是一个Safari bug。

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