Firefox -moz-border-radius 不会裁剪图像？答案

【问题标题】：Firefox -moz-border-radius won't crop out image?Firefox -moz-border-radius 不会裁剪图像？
【发布时间】：2010-11-23 18:49:27
【问题描述】：

如果设置了图像的边框半径，有谁知道让 Firefox 裁剪角落的方法？它包含的元素可以正常工作，但我会看到丑陋的角落。

有什么方法可以在不将图像设置为背景图像或在我将其放到我的网站之前对其进行处理的情况下解决此问题？

【问题讨论】：

标签： firefox css

【解决方案1】：

解决方法：将图像设置为容器元素的背景，然后在该元素上添加边框半径。

【讨论】：

这可能有效，但 OP 明确表示“不将图像设置为背景图像”。如果需要动态指定图像文件，则必须使用 JavaScript 设置背景图像。
您不必使用 javascript 来设置图像 - 只需在样式属性中内联即可。

【解决方案2】：

如果将边框半径直接应用于img 元素，它不会裁剪吗？有known issues with -moz-border-radius as far as contained content is concerned。

--编辑

好的，它也不会裁剪 img。如果您的图像是纯色背景上的某种 png/gif，您可以执行以下操作：

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

但是，如果您想在照片上获得圆角，那么它在 3.5 中将无法使用。

【讨论】：

我已经在使用 2px 的边框了。我可能必须从这些元素中删除边界半径，然后等到 Mozilla 一起行动。这可能只是针对 WebKit 用户的另一个“渐进式增强”。
一直在玩 SVG 并找到了一种在图像元素上获得圆角的方法：boogdesign.com/examples/svg/rounded-corners.xhtml 只能在 Firefox 3.5 中工作，而且可能工作量太大，但很有趣。我会在周末写一篇关于它的博客文章。
好的，没等到周末：boogdesign.com/b2evo/index.php/2009/09/02/…
Firefox still 从 3.6.13 开始不支持此功能。至少可以说很烦人。
只是想告诉您 Firefox 4.0 beta (11) 已修复此问题，并且显示的边框半径与预期的一样

【解决方案3】：

我想有答案，但对不起我的英语...... 我解决了在图像上放置另一个带边框且没有背景颜色的 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】：

解决方法：将图像设置为容器元素的背景，然后在其上添加边框半径元素。

除非图像与 div 的大小完全相同，否则这将不起作用。除非您在 firefox 3.6 中使用新的 css 属性，它允许调整背景图像大小，但几乎没有人使用 3.6。

所以我同意亚历克斯的观点，那就是如果你将图像设为 div/other elm 的大小。

【讨论】：

【解决方案5】：

我认为没有办法使用 -moz-border-radius 在 FireFox 中直接对图像进行四舍五入。但是你可以用老式的方法模拟圆角，加上额外的标记。

看起来像这样：

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

然后是 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;}

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

带有 PNG-24 背景的 Div 角会非常好用。如果你能处理锯齿，你可以在 IE6 上使用 GIF 背景，或者只为方角完全删除背景图像。使用条件 cmets 将 CSS 提供给 IE6。

【讨论】：

只要你用的是CSS3，你还不如使用多个背景。
+1 适用于在任何地方都可以使用的老式手工工匠式夹具！！
不发表评论就拒绝投票不仅是懦夫，而且对 Web 开发社区没有帮助。此外，上面的示例没有使用 CSS3，虽然 OP 可能很酷，但有多种背景，我只是提供了另一种更向后兼容的解决方案。另请注意，这是在 2010 年，当时支持 IE6 是完全有可能的。

【解决方案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)
}

我从这个链接获得了“border-radius.htc”脚本：

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

它增加了对 IE8 圆角的支持。我还必须设置 position:relative 和 z-index，因为否则 div（和背景图像）将显示在放置 container(round_image_borders) div 的所需 div 容器下。

这适用于：

FF 3.6.16

IE 8

Chrome 12.0

是的，图像必须与具有round_image_borders 类的div 具有相同的大小。但此解决方法旨在用于所有尺寸相同的图像。

【讨论】：

【解决方案7】：

如果你使用溢出：隐藏它不会显示图像角落突出。

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

【讨论】：

【解决方案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 似乎确实会剪切背景图像，因此如果您设置 h1 背景图像并对其应用边框半径，它将被剪切。（刚刚在 FF 3.6.12 中验证）

【讨论】：