是Safari&；Mobile Safari使用半径和填充错误渲染圆形边框？

Safari和Mobile Safari在合并边界半径、填充和边界时似乎有问题。在Chrome和Firefox中运行良好

---

我现在能想到的最佳解决方案是：

使用包装器div绘制边框，然后将图像放置在其中。右边还有一些人工制品，但我想这是一个狩猎错误

HTML

---

我打赌这是Safari bug：

边界半径

应用得很晚，会产生剪切效果。幸运的是，

box shadow

已正确渲染，因此让我们使用它：

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

---

在iPad和OS X上的Safari 6上。

删除填充似乎可以修复内部空白。为什么

500px

边界半径？边界半径为50%是否有问题@Mooseman是的，但我想要填充边界效果：）高边界半径是用来创建circle@cimmanon谢谢，这是一种更好的创建圆的方法：）@eteubert对，但它似乎在渲染时没有考虑

边界半径。不确定这是否是来自旧版本WebKit的bug…很好！OS X Safari中仍然存在渲染问题，但Mobile Safari现在渲染得很好。
img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

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

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

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