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上进行搜索），它显示10px纯白色边框仍然是原始图像周围的正方形，并且半径在之后应用，因此切断了一些边框。

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

Answer 1

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

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