围绕圆角的Chrome图像边框消失 [英] Chrome image border around rounded corners disappearing

问题描述

所以，这是问题： http://bildr.no/view/927562 p>

仔细观察： http://bildr.no/view/ 927563

如您所见，无形。这是图片的CSS代码：

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

< img src =images / image.jpgid = contentImage/>

任何帮助都会赞赏:-)

解决方案

这是一个不幸的webkit错误。我知道的唯一解决方法是将您的img转换为div然后将img作为背景图片：

  #contentImage {
 background：url //placehold.it/100x100'）left left no-repeat; 
 width：100px; 
 height：100px; 
 border：1px solid＃000; 
 border- radius：8px; 
 margin-right：25px; 
} 
  

http://jsfiddle.net/ybPKJ/

So, this is the problem: http://bildr.no/view/927562

A closer look: http://bildr.no/view/927563

As you can see, the border for each corner turns invisible. This is the CSS code for the image:

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

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

Any help would be greatly appreciated :-)

解决方案

This is an unfortunate webkit bug. The only workaround that I know about is converting your img into a div and then putting the img as a background image:

#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/

这篇关于围绕圆角的Chrome图像边框消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！