【发布时间】：2012-08-24 22:04:17
【问题描述】：
这最好用图片来解释。
火狐，右：
Chrome，错误：
这是一个（全绿色）图像，边框为 2px（红色），边框半径为 6px。在我的设计中，边框几乎看不到，因此图像在 Chrome 中看起来完全是方形的。
是否可以在没有额外标记或 javascript 的情况下在 Chrome 中获得正确的结果？
【问题讨论】：
标签： firefox google-chrome border css
【发布时间】：2012-08-24 22:04:17
【问题描述】：
我不相信你可以用 Chrome 做到这一点。图片将超出border-radius 的范围，我认为这是预期的行为（否则他们只是没有注意到）。
例如，当using a div 时，您可以看到背景行为正常。您可以考虑using a div instead of img，并使用您的源图像作为背景（并强制其宽度和高度）。
坦率地说：在 Chrome 中，似乎没有办法强制您的图像被自身（甚至其容器）的边框隐藏，除非它被设置为背景。事实上，has been asked about before 和blogged about 的问题也是如此（事实上，patrickzdb 那里的评论可能对您有所帮助）。
【讨论】：
-
你知道，最初我没有考虑使用
div而不是img，原因很简单：它们是头像，我必须在标记中生成它们。但后来我发现，我也可以在标记中使用<div style="background-image:..."></div>来添加图像，所以我认为这可以解决问题:)
显然这是 chrome 中的一个错误..
我通常为 chrome 应用 box-shadow 而不是边框。
所以，如果您不介意在没有 javascript 的情况下应用 css hack 来解决它：http://jsfiddle.net/3cuHU/
【讨论】：
-
我没有想到盒子阴影的传播！这确实是一个不错的技巧。我选择其他解决方案只是因为它不需要我在这里和那里更改填充/边距（边框占大小而 box-shadow 没有），但它肯定与解决方案一样有效。
-
我希望我也能给你打勾，因为阴影作为边框的技巧在其他地方也很有用。