border-radius in Chrome bug？ [英] border-radius in Chrome bug?

问题描述

我在chrome中的border-radius有问题
这是我的代码：

I have a problem with the border-radius in chrome this is my code:

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

在mozzila它工作正常，但在chrome看起来有趣...
在mozzila我可以看到一个圆圈与我的形象接壤，但在chrome上，圆圈裁剪边界，我可以看到是直线

On mozzila it works fine, but on chrome it looks funny... On mozzila I can see a circle bordering my image, but on chrome the circle crops the borders and all i can see are straight line

屏幕截图： http://postimage.org/image/27turq0mc/

您可以帮助？

推荐答案

这可能是一个chrome错误。一个解决方案可以用 div 包装 img ，并进行以下css：

this is probably a chrome bug. A solution could be to wrap the img with a div and make the following css:

img{                
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px;
    border-radius: 24px;
    display:block;
}
div {
    border: 2px solid #c7c7c7; 
    border-radius: 24px;
    -webkit-border-radius: 24px;
    width:40px; /* the width of image */
    height:40px; /* the height of image */
}

演示： http://jsfiddle.net/EnmMp/1/

这篇关于border-radius in Chrome bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！