webkit - Webkit：图像覆盖圆形边框

Question

在图像上使用圆角边框时，webkit 浏览器会将边框隐藏在图像后面

CSS

img {
    border: 10px solid #000;
    border-radius: 100%;    
}

HTML

<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />

错误转载@http://jsfiddle.net/zPpVm/

这可能与这个 Webkit bug有关，但我找不到合适的解决方法。

Answer 1

一种可能的解决方法是使用box-shadow：

box-shadow: 0 0 0 10px black;

现场示例

主要问题：它不会在盒子模型中计算

Answer 2

作为另一种解决方法，您可以像这样包装图像：

 <span class="img_container" >
    <img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
 </span>

比风格元素：

.img_container {
    border: 10px solid #000;
    border-radius: 100%; 
    display: inline-block;
    overflow: hidden;
}
.img_container img {
    display: block;
}

除 Opera 之外的所有现代浏览器都会正确呈现它。