it-swarm.dev

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

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

有没有办法解决这个问题,而不将图像设置为背景图像或在我将其放入我的网站之前处理它?

49
dougoftheabaci

如果将边界半径直接应用于img元素,是否不会裁剪?就包含的内容而言,-moz-border-radius存在 已知问题

- 编辑

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

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

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

19
robertc

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

21
Alex

我想要得到答案,但对不起我的英语...我解决了问题,在图像上放置了另一个边框没有背景颜色的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;
}
3
Max
.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具有相同的大小。但是,此解决方法旨在与所有具有相同大小的图像一起使用。

1
Erik Čerpnjak
img {
 overflow: hidden;

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

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

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

1
Christian

我认为有一种方法可以使用-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。

1
fisherwebdev

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

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

所以我同意亚历克斯的观点,那就是如果你把图像变成div/other Elm的大小。

1
Dale Larsen

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

0
Dave Rau