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

I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.

我有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;

}

If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with: Graphics Page

如果你提到的3个浏览器中有一个使用-webkit-border-radius:请查看图片,例如我遇到的问题:图形页面

5 个解决方案

#1

What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.

您可以做的是将现在的 -webkit-border-radius不能正确裁剪图像标签上的所有样式放在父上,以便将其用作图像的容器。至少在我看来,这也更有意义。不要忘记保持浮动:留在图像上以摆脱幻影底部边缘。

#2

I think it's because it is in the foreground above the border

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

try using the same code you have above, but in your html:

尝试使用上面的相同代码,但在你的HTML中:

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

#3

This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.

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

#4

This worked for me in Chrome and Safari.

这在Chrome和Safari中适用于我。

Image is top level.

图像是*的。

div.someclass with radius 5px and div.someclass img with radius 4px.

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

That seems to make the corners look cleaner in Chrome and Safari.

这似乎使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;   
}

#5

I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.

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

I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.

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

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

This solution may work if you set different radius values for image and the link.

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

#1

#2