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;
}

我正在使用 twitter 的引导程序，因此边框半径由他们的类 .img-circle 指定（这就是半径为 500px 的原因），然后我添加了边框粗细和颜色。

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

Chrome中的边框 iOS中的边框

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

score 15 · Accepted Answer

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

干净的解决方案：http: //jsfiddle.net/TjUum/使用带有头像的块div元素作为background-image. 根据需要进行调整。

1 回答 1