Firefox -moz-border-radius不会裁剪出图像？
有没有人知道如何设置图像的边框半径让Firefox的angular落？ 它包含元素将正常工作，但我得到丑陋的angular落伸出。
任何方式来解决这个问题，而不把图像设置为背景图像或处理它之前，我把它放在我的网站上？
如果将边框半径直接应用于img元素，它会不会裁剪？ 就所包含的内容而言，已知的问题是-moz-border-radius 。
– 编辑
好吧，它也不裁剪img 。 如果你的图像是一个固体背景上的某种forms的png / gif，你可能可以这样做：
img { border: 10px solid white; -moz-border-radius: 10px; }
但是，如果你想在照片上得到圆angular，那么在3.5中就不会起作用了。
解决方法：将图像设置为容器元素的背景，然后在该元素上添加边框半径。
我认为有答案，但对我的英语感到抱歉…我解决了问题把另一个边框，没有背景色的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; }
解决方法：将图像设置为容器元素的背景，然后在该元素上添加边框半径。
这将无法正常工作，除非图像的大小完全相同。 除非你在Firefox 3.6中使用新的css属性，允许背景图片大小，但几乎没有人已经在3.6。
所以我同意Alex的说法，那就是如果你把图片改成div / other elm的大小。
我不认为有一种方法可以使用-moz-border-radius直接在FireFox中对图像进行四舍五入。 但是你可以用老式的方式来模拟圆angular，并加上额外的标记。
所以看起来像这样：
<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;}
angular落的背景图像看起来有点像新月，透明。 这是一个负面的空间技术，你可以让图像显示angular落的透明度。
与PNG-24背景的Divangular落将非常好地工作。 如果你能处理这个问题，你可以使用IE6的GIF背景，或者完全删除方形angular落的背景图片。 使用条件注释将CSS提供给IE6。
.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的圆angular的支持。 我还必须设置位置：relative和z-index，否则div（和背景图像）将显示在放置容器（round_image_borders）div的所需div容器下。
这适用于：
FF 3.6.16
IE 8
Chrome 12.0
是的，图像的大小必须与round_image_borders类的div大小相同。 但是，此解决方法旨在用于具有相同大小的图像。
如果使用overflow：hidden，则不会显示突出的图像边angular。
谁知道，他们仍然可能在那里，只是隐藏。
img { overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
Firefox似乎剪辑了一个背景图像，所以如果你设置一个h1背景图像并且应用border-radius来剪辑它。 （刚刚在FF 3.6.12中validation）
