Chrome浏览器中圆角周围的图像边框消失了。

Question

Chrome浏览器中圆角周围的图像边框消失了。

5

所以，这就是问题所在：http://bildr.no/view/927562 仔细观察：http://bildr.no/view/927563

正如您所看到的，每个角的边框变成了透明。这是该图像的CSS代码：

#contentImage {
  float: left;
  border: 1px solid #C4C4C4;
  border-radius: 8px;
  margin-right: 25px;
}

<img src="images/image.jpg" id=contentImage" />

非常感谢您的帮助 :-)

- nicohvi

你的图片是否被裁剪成圆角了？看起来像是图片覆盖在角落上。 - Trevor

请参考以下链接：https://dev59.com/OXM_5IYBdhLWcg3wgzdl - Dawson

不，我以为Chrome会自动处理裁剪，老实说。Firefox似乎可以:p - nicohvi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

这是一个不幸的Webkit bug。我所知道的唯一解决方法是将您的img转换为div，然后将img作为背景图像放置：

#contentImage {
  background: url('http://placehold.it/100x100') top left no-repeat;
  width: 100px;
  height: 100px;
  border: 1px solid #000; 
  border-radius: 8px;
  margin-right: 25px;
}

http://jsfiddle.net/ybPKJ/