如何使边框跟随图像上的圆角答案

【问题标题】：How to make a border follow rounded corners on an image如何使边框跟随图像上的圆角
【发布时间】：2012-08-27 18:36:21
【问题描述】：

我想要一个带边框的圆形图像，所以我使用了这个：

img {
    border: solid 10px #141313;
    border-radius: 50%;
}

但边框出现为边框的原始形状，正方形。边框也可以圆角吗

我想使用img 标签，而不是background-image

【问题讨论】：

border-radius 按预期工作；请记住，某些浏览器需要供应商前缀才能工作；
真的有人费心阅读这个问题吗？我没有添加前缀以使问题保持简单。不，它不像“预期的”那样工作，img 是圆形的，边框不是。我还问了img 元素不是带有background-image的div
你的代码工作正常...我做了一个小提琴jsfiddle.net/qkUJT...我在小提琴中有什么遗漏的吗？？
@Usman 似乎是浏览器不一致/错误；据我所知，它适用于最近的 Webkit 和 Gecko 浏览器，但不适用于当前的 Opera（我不了解 IE）；
@feeela... llyaD 在 'Ascension' 的回复中说“这个问题与前缀无关......”..这就是我问这个的原因......

标签： css border rounded-corners

【解决方案1】：

你读过这篇文章吗？

http://answers.oreilly.com/topic/1002-how-to-set-a-rounded-border-around-an-image-using-css/

似乎您至少缺少一些跨浏览器一致性的属性；-)

【讨论】：

【解决方案2】：

看：IE9+、Firefox 4+、Chrome、Safari 5+ 和 Opera 仅支持border-radius 属性。

img {
    -moz-border-radius: 35px; // Mozilla
    -webkit-border-radius: 35px; // Chrome and Safari
    -o-border-radius: 35px; // Opera
    border-radius: 35px; // CSS 3
    }

【讨论】：

添加高高宽以创建一个圆圈。
创建一个完整的圆圈，您使用border-radius: 50%; 并且宽度和高度相等。这个问题与前缀无关，我知道它们，我删除它们以简化问题。
我知道。但是您的使用对每个浏览器都有好处，可以按照您自己的方式工作。
@IlyaD，对不起，但唯一的方法是留下圆形图像，然后设置边缘 css。我不知道其他方式。