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;

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