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屋！