在Chrome中的border-radius有bug吗？

Question

我在Chrome中有关于border-radius的问题。这是我的代码：

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

在火狐上一切正常，但在谷歌浏览器上看起来有点奇怪... 在火狐浏览器上，我可以看到一个环绕着我的图片的圆圈边框，但在谷歌浏览器上，这个圆圈会裁剪边框，我只能看到直线。 以下是截图：http://postimage.org/image/27turq0mc/ 你能帮忙吗？

- Dorel

---

你能给一个例子吗？http://jsfiddle.net/sandeep/Q55C8/5/ - sandeep

我看不到图片... - BoltClock

Answer 1

这可能是Chrome的一个bug。解决方法可以将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 */
}

Demo: http://jsfiddle.net/EnmMp/1/

- Sotiris

Answer 2

我遇到了同样的问题，解决方案由以下提供：

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

解决了问题。 首先，它展示了仅使用CSS3和HTML的解决方案，然后再展示了使用JQuery的解决方案。

- Vinicius José Latorre

Answer 3

尝试在背景图像上进行操作，而不是在HTML img元素上进行操作，因为某些img元素尚不支持边框半径（我猜）。

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

- Thomas Andreè Wang

---

我的图片是由一个 PHP 函数生成的... 我必须按照它的样子处理这个 img... - Dorel

如果边框不能裁剪图像元素，则会出现问题，但您可以尝试使用 PHP 动态更改背景。由于我不是 PHP 专家，因此在此提供一个链接 http://drupal.org/node/98246。 - Thomas Andreè Wang

使用背景图像并不是解决此错误的方法。该错误仍然存在。 - Jezen Thomas

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;

- user2716666