image - -moz-border-radius 不适用于 firefox 中的图像...为什么？ (与css3相关)

Question

-moz-border-radious 不适用于 firefox 中的图像元素(在 html 中的意思)...为什么？ (与css3相关)

我测试了一些解决该问题的方法，例如为该图像制作一个容器并更改容器的半径/没有帮助!

感谢关注

最好的问候

Answer 1

Firefox 3 将前景图像视为在边框前面。这会产生您所看到的效果。它不会影响任何其他浏览器，包括 Firefox 4。

这个问题在上面评论中重复链接的主题中进行了详细讨论 -- Firefox -moz-border-radius won't crop out image?

解决它的最佳方法是使用背景图像而不是希望具有圆 Angular 的前景图像:

即:<div style='background:url(myimage.jpg);' />而不是 <img src='myimage.jpg'>

这样做的缺点是背景图像不如前景图像灵活——即更难缩放它们等。但它确实解决了问题。

其他选项是给图像本身添加圆 Angular ，或者干脆忽略它(因为它只影响 Firefox 3；取决于有多少用户会受到影响，以及对您的设计的影响有多大)。