Question

如果设置了图像的边框半径，有没有人知道如何让Firefox裁剪角落？它包含的元素将工作正常，但我会让丑陋的角落伸出来。

如果没有将图像设置为背景图像或在将其放入我的网站之前对其进行处理，是否有任何方法可以解决此问题？

Answer 1

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

Answer 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中使用。

Answer 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;
}

Answer 4

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

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

所以我同意亚历克斯，就是如果你把图像变成div /其他榆树的大小。

Answer 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角落可以很好地工作。如果你可以处理jagginess，你可以使用IE6的GIF背景，或只是完全删除背景图像的方角。使用条件注释将CSS提供给IE6。

Answer 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（和背景图像）将显示在所需的div容器下，其中放置了容器（round_image_borders）div。

这适用于：

FF 3.6.16

IE 8

Chrome 12.0

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

Answer 7

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

谁知道，他们仍然可能在那里，只是隐藏。

Answer 8

img {
 overflow: hidden;

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

Answer 9

Firefox似乎会剪切背景图像，因此如果您设置了h1背景图像并将border-radius应用于它将剪切。（刚刚在FF 3.6.12中验证）

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

9 个答案: