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/

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

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.