Firefox - mozilla -border-radius不会裁剪出图像吗?

Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.

如果设置了图像的边界半径，有没有人知道让Firefox裁剪角落的方法?它包含的元素可以工作，但我有难看的角落突出。

Any way to fix this without setting the image as a background image or processing it before I put it on my site?

有什么方法可以在不将图像设置为背景图像或在将其放到站点之前对其进行处理的情况下修复它吗?

9 个解决方案

#1

Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.

如果你直接对img元素施加边界半径，它会不会被裁剪?就包含的内容而言，有一些众所周知的问题。

--edit

——编辑

OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:

好吧，它也不会伤害img。如果你的图片是某种固体背景上的png/gif，你可以做如下的事情:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.

但是如果你想在一张照片上画出圆角那么在3。5秒内是行不通的。

#2

Workaround: Set the image as the background of a container element, then add border radius on that element.

工作区:将图像设置为容器元素的背景，然后在该元素上添加边框半径。

#3

I think to have the answer but sorry for my english... I resolved the question putting another div with border and no background color over the image.

我想知道答案，但我的英语不好意思……我解决了在图像上放置另一个带有边框且没有背景颜色的div的问题。

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}

#4

Workaround: Set the image as the background of a container element, then add border radius on that element.

工作区:将图像设置为容器元素的背景，然后在该元素上添加边框半径。

This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.

除非图像的大小与div完全相同，否则这是行不通的。

So I agree with Alex, that is if you make the image the size of the div/other elm.

所以我同意Alex的观点，那就是如果你让图片的大小和div/other elm一样。

#5

I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.

我不认为有一种方法可以使用-moz-border-radius来直接在FireFox中使用图像。但是您可以使用额外的标记来模拟圆角。

So that looks like this:

看起来是这样的:

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

Then the CSS:

CSS:

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.

角落的背景图像看起来有点像新月，透明。这是一种负空间技术，你可以让图像通过角落的透明度显示出来。

Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.

具有PNG-24背景的Div角落将非常好用。如果你能处理不整齐，你可以使用GIF背景为IE6，或者只是删除背景图像完全平方角。使用条件注释为IE6提供CSS服务。

#6

.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}

I got the "border-radius.htc" script from this link:

我得到了”这个特性。htc的脚本来自这个链接:

http://code.google.com/p/curved-corner/

What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.

它增加了对IE8圆角的支持。我还必须设置位置:relative和z-index，否则div(以及背景图像)将显示在所需的div容器下，容器(round_image_borders) div将被放置在这个容器中。

This works for:

这适用于:

FF 3.6.16

IE 8

Chrome 12.0

And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.

是的，图像必须具有与具有类round_image_borders的div相同的大小。但是，这种方法的目的是与所有具有相同大小的图像一起使用。

#7

If you use overflow: hidden it won't display the image corners sticking out.

如果使用溢出:隐藏它将不会显示突出的图像角。

Who knows, they still might be there, just hidden.

谁知道呢，他们可能还在那里，只是隐藏着。

#8

img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

#9

Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)

Firefox似乎确实会剪切一个背景图像，所以如果你设置一个h1背景图像并对其应用边框半径，它就会剪切。(仅在FF 3.6.12中验证)

#1