CSS边框半径在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，因此边框半径由它们的类 .img-circle 指定（这就是为什么半径为 500 像素），然后我添加了边框线重量和颜色。

在桌面浏览器（Chrome）上运行良好，但在 iOS 上查看时（我的 iPad 上的 Safari），白色实线 10px 的边框仍然是原始图像周围的正方形，然后应用半径，因此切掉了一些边框。

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

- Jacob Tomlinson

Answer 1

快速且简单的解决方案: http://jsfiddle.net/mEZEj/ 使用 box-shadow 替代 border。

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

- Jen

---

非常感谢。我尝试了清理解决方案，但它导致我的布局出现问题，所以我现在采用了快速且简单的方法，等有时间时再去研究清理解决方案。 - Jacob Tomlinson

帮助某人让预定义的模板页面在Discord机器人上运行，这个快速而简单的修复方法是一个救命稻草。 - RivenSkaye

出于可访问性的考虑，背景图像应仅在装饰性情况下使用。如果图像是内容，则应该使用img标签，以便屏幕阅读器可以正确“读取”它。 - emersonthis