圆角周围的 Chrome 图像边框消失答案

【问题标题】：Chrome image border around rounded corners disappearing圆角周围的 Chrome 图像边框消失
【发布时间】：2011-10-05 07:48:57
【问题描述】：

所以，这就是问题所在：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" />

任何帮助都会非常感谢 :-)

【问题讨论】：

您的图像是否被裁剪成圆角？看起来图像覆盖了角落。
这里可能的答案。查看已接受答案中的链接：stackoverflow.com/questions/1347796/…
不，老实说，我认为 chrome 会自动处理裁剪。 Firefox 似乎：p

标签： google-chrome rounded-corners css

【解决方案1】：

这是一个不幸的 webkit 错误。我知道的唯一解决方法是将您的 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/

【讨论】：

我很害怕 :p 猜猜我得把我的 css 文件弄得乱七八糟了（有很多图片）。
如果是你的情况，那么添加更多标记而不是混乱你的 css 会更干净：jsfiddle.net/v9NVV
我就是这样做的，而且效果很好。非常感谢！