Question

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

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

在mozzila上它工作正常，但在Chrome上看起来很有趣...... 在mozzila上，我可以看到一个与我的图像接壤的圆圈，但是在铬上，圆圈会剪切边框，我所能看到的都是直线

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

你可以帮忙吗？

Answer 1

这可能是一个铬虫。一个解决方案可能是用img包裹div并生成以下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/

Answer 2

我遇到了同样的问题和解决方案：

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

修复了问题。

首先它显示了仅使用CSS3＆amp; HTML然后它使用JQuery呈现解决方案。

Answer 3

尝试在背景图像上而不是在html img元素上执行此操作，因为一些img元素不适用于边框半径（但我猜测）。

div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}

Answer 4

而不仅仅是下面的边框代码

-moz-border-radius: 2px 2px 15px 15px;

对于从左上角开始顺时针应用的半径，此刻您无法对Webkit执行此操作。所以你必须长篇大论地写出来：

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

Chrome bug中的border-radius？

4 个答案: