CSS Firefox -moz-border-radius 不会裁剪图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1347796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox -moz-border-radius won't crop out image?
提问by
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?
有什么方法可以解决这个问题，而无需将图像设置为背景图像或在我将其放在我的网站之前对其进行处理？
采纳答案by robertc
Does it not crop if you apply the border radius directly to the imgelement? There are known issues with -moz-border-radius as far as contained content is concerned.
如果将边框半径直接应用于img元素，它不会裁剪吗？就包含的内容而言，-moz-border-radius存在已知问题。
--edit
- 编辑
OK, it doesn't crop imgeither. 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 中是行不通的。
回答by Alex
Workaround: Set the image as the background of a container element, then add border radius on that element.
解决方法：将图像设置为容器元素的背景，然后在该元素上添加边框半径。
回答by Max
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;
}
回答by fisherwebdev
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 角会很好地工作。如果你可以处理锯齿，你可以使用 IE6 的 GIF 背景，或者完全删除方角的背景图像。使用条件注释为 IE6 提供 CSS。
回答by Erik ?erpnjak
.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:
我从这个链接得到了“border-radius.htc”脚本：
http://code.google.com/p/curved-corner/
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 圆角的支持。我还必须设置 position:relative 和 z-index，否则 div（和背景图像）将显示在放置容器（round_image_borders）div 的所需 div 容器下。
This works for:
这适用于：
FF 3.6.16
FF 3.6.16
IE 8
浏览器 8
Chrome 12.0
铬 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 具有相同的大小。但此解决方法旨在用于所有具有相同大小的图像。
回答by Christian
If you use overflow: hidden it won't display the image corners sticking out.
如果您使用溢出：隐藏它不会显示突出的图像角。
Who knows, they still might be there, just hidden.
谁知道呢，他们可能还在那里，只是隐藏起来。
回答by insign
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
回答by Dale Larsen
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 的大小完全相同，否则这将不起作用。除非您在 Firefox 3.6 中使用新的 css 属性，它允许调整背景图像大小，但几乎没有人已经在 3.6 上。
So I agree with Alex, that is if you make the image the size of the div/other elm.
所以我同意亚历克斯的观点，那就是如果你将图像设为 div/other elm 的大小。
回答by Dave Rau
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 中验证）
