ios - CSS 边框半径不适用于 iOS

Question

我在 iOS (safari) 上遇到了一些边框问题。

我有一个图像(我的头像)，我想给它一个 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 ，因此边框半径由他们的类 .img-circle 指定(这就是半径为 500 像素的原因)，然后我添加了边框粗细和颜色。

这在桌面浏览器(Chrome)上运行良好，但在 iOS(我的 iPad 上的 safari)上查看时，它显示 10px 纯白色边框仍然是原始图像周围的正方形，之后应用了半径，因此切断了一些边界。

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

Answer 1

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

清洁溶液:http://jsfiddle.net/TjUum/使用带有头像的 block div 元素作为 background-image。根据需要进行调整。