Question

我有5个浏览器用于渲染HTML编码页面：IE9，Firefox 4.0以及所有最新版本的Chrome，Safari和Opera。现在在IE9和Firefox 4.0中，正在使用border-radius：和-moz-border-radius正确裁剪图像：但是在使用-webkit-border-radius：的Opera，Chrome和Safari中失败了。使用Opera时，图像根本没有被裁剪，使用Safari和Chrome时，图像会有些裁剪，但边框也会被裁剪掉。

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

如果你提到的3个浏览器中有一个使用-webkit-border-radius：请查看图片，例如我遇到的问题： Graphics Page

Answer 1

您可以做的是将现在<img>标记上的所有样式放在父<a>上，以便将其用作图像的容器。至少在我看来，这也更有意义。不要忘记在图像上保留float: left以消除幻影底部边缘。

Answer 2

我认为这是因为它位于边界上方的前景

尝试使用上面的相同代码，但是在你的html中：

<div class="nonTyp" style="background-image:url('image.jpg');"></div>

Answer 3

这可能与应用边框与半径剪辑的顺序有关，但非常奇怪。解决方案是将border-radius和相关定义移动到封闭标记。请记住声明display:block，以便在所有浏览器中将其视为块级别。

Answer 4

这适用于Chrome和Safari。

图片是顶级。

div.someclass，半径为5px，div.someclass img，半径为4px。

这似乎使Chrome和Safari中的角落看起来更干净。

.someclass {
  ...
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
          border-radius: 5px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
  -webkit-box-shadow: 0px 0px 5px #000; 
     -moz-box-shadow: 0px 0px 5px #000;
          box-shadow: 0px 0px 5px #000; 
}

.someclass img {
  ...
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px; 
          border-radius: 4px;   
}

Answer 5

我认为Chrome用于图片和链接的绘图功能在彼此之间的工作方式不同。这会导致图像和链接之间出现空白。

我通过稍微修改Matjis的jsfiddle代码来部分修复了这个bug。我把img标签的位置移到了左边。

.gallery a img {
...
position:relative;
left: 2px;
}

如果为图像和链接设置不同的半径值，此解决方案可能有效。

-webkit-border-radius不能正确裁剪图像

5 个答案: