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.根据需要调整.