CSS Border Radius无法在iOS上运行

Question

我在iOS（safari）上使用边框时遇到了一些麻烦。

我有一个图像（我的gravatar），我想给出一个10px实心和白色的圆形边框。

要实现这一点，我有HTML

<img src="http://2.gravatar.com/avatar/b7c2d49748426791dc98b8214dfac9d1?s=500" class="img-circle" height="300" width="300">

和CSS

.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
border: solid 10px white;
}

JSFiddle http://jsfiddle.net/2UT8v/2/

我正在使用twitter的bootstrap，所以border-radius由他们的类.img-circle指定（这就是半径为500px的原因）然后我添加了边框权重和颜色。

这适用于桌面浏览器（Chrome），但在iOS上观看时（iPad上的Safari），它显示10px纯白色边框仍然是原始图像周围的正方形，并且半径在之后应用，因此切断了一些边界。

有人知道如何让边框跟随iOS中的半径吗？

Answer 1

快速而肮脏的解决方案：http://jsfiddle.net/mEZEj/使用box-shadow代替border。

清洁解决方案：http://jsfiddle.net/TjUum/使用块div元素，将头像作为background-image。根据需要进行调整。