Firefox -moz-border-radius不会裁剪图片？ [英] Firefox -moz-border-radius won't crop out image?

问题描述

有没有人知道一种方法，如果图像的边框半径设置，Firefox可以裁剪角？它包含元素将工作正常，但我得到丑陋的角落伸出。

Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.

以任何方式修正此问题，而不将图片设为背景图片或在我将图片加入我的网站之前处理图片？

Any way to fix this without setting the image as a background image or processing it before I put it on my site?

推荐答案

如果将边界半径直接应用到 img 元素，它不会裁剪？对于包含内容，存在 -moz-border-radius的已知问题。

Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.

- 编辑

确定，它不会裁剪 img 。如果你的图片是某种png / gif在一个坚实的背景，你可以做这样的事情：

OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:

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

但是如果你想在照片上获得圆角，去在3.5工作。

But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.

这篇关于Firefox -moz-border-radius不会裁剪图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！