css – Safari和Mobile Safari是否呈现圆角边框,半径和填充不正确？

当您组合边框半径,填充和边框时,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/

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

解决方法

我敢打赌它是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.

原文地址：https://www.jb51.cc/css/217944.html