-moz-border-radious 不适用于 Firefox 中的图像...为什么？ （与css3相关）
-moz-border-radious 不适用于 firefox 中的图像元素（在 html 中）...为什么？ （与css3相关）
我测试了一些方法来解决这个问题，例如为该图像创建一个容器并更改容器的半径/没有帮助！
感谢您的关注
致以诚挚的问候
-moz-border-radious does not work on image element (mean in html) in firefox ... why? (related to css3)
i test some way for solving that such as make a container for that image and changing the radious of container / not help !
thanks for attention
best regards
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Firefox 3 将前景图像视为位于边框前面。这会产生您所看到的效果。它不会影响任何其他浏览器，包括 Firefox 4。
该问题在上面评论中作为重复项链接的主题中进行了详细讨论 - Firefox -moz-border-radius 不会裁剪图像？
最好的方法是使用背景图像而不是前景图像想要圆角：
即：
而不是这样做的缺点是背景图像不像前景图像那样灵活——即但它确实解决了问题。
其他选项是为图像本身提供圆角，或者干脆忽略它（因为它只影响 Firefox 3；取决于有多少用户会受到影响，以及影响您的设计的程度）。
Firefox 3 treats foreground images as being in front of the border. This results in the effect that you're seeing. It doesn't affect any other browsers, including Firefox 4.
The issue is discussed at length in the topic linked as a duplicate in the comments above -- Firefox -moz-border-radius won't crop out image?
The best way around it is to use background images instead of foreground images where you want to have rounded corners:
ie:
<div style='background:url(myimage.jpg);' />instead of<img src='myimage.jpg'>The down-side of this is that background images aren't quite as flexible as foreground images -- ie its harder to scale them, etc. But it does resolve the problem.
The other options are to give the image itself rounded corners, or simply to ignore it (since it only affects Firefox 3; depends on how many of your users would be affected, and how much if affects your design).