firefox - 带有边框的图像上的边框半径在 Firefox 和 Chrome 上不同

Question

最好用图片来解释。

Firefox，右:

Chrome，错误:

jsfiddle .

这是一个(全绿)图像，边框为 2px(红色)，border-radius 为 6px。在我的设计中，边框几乎不可见，因此图像在 Chrome 中看起来完全是正方形。

是否可以在没有额外标记或 javascript 的情况下在 Chrome 中获得正确的结果？

Answer 1

我认为您无法使用 Chrome 做到这一点。图片将超出 border-radius 的范围，我认为这是预期的行为(否则他们只是没有注意到)。

当 using a div ，例如，您可以看到背景表现正常。你可以考虑using a div instead of img ，并使用您的源图像作为背景(并强制其宽度和高度)。

直截了本地说:在 Chrome 中，似乎没有办法强制您的图像被其自身(甚至其容器)的边框隐藏，除非将其设置为背景。事实上，问题has been asked about before , 和 blogged about以及(事实上，patrickzdb 的评论可能会对您有所帮助)。