Question

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

CSS

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

HTML 的

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

Bug已转载@ http://jsfiddle.net/zPpVm/

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

Answer 1

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

box-shadow: 0 0 0 10px black;

<强> Live Example

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

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之外的所有现代浏览器都会正确呈现它。

Webkit：图像覆盖圆形边框

2 个答案: