css - Safari/Chrome 中使用边框半径属性的图像 Angular 的格式不正确

Question

在我的主页上工作时，我正在使用 JQuery 的 fadeIn 和 fadeOut 方法循环浏览一些图像。

图像的边框为 2px，半径为 14px。

如您所见，图像的 Angular 与边界重叠。

这种行为只发生在 Safari 和 Chrome 中，不会发生在 Firefox 和 IE 中。

有人知道为什么吗？

您可以在此处看到此行为:

http://www.findyourgeek.com/index-copy.php

谢谢。

Answer 1

在 Chrome/Safari(或者更确切地说是 Webkit)中对图像的 border-radius 的支持似乎有点问题

Chrome -webkit-border-radius bug? - CSS-Tricks Forums

以上帖子来自今年早些时候(~Chrome ver 10)，当时图像上的 border-radius 支持不起作用。支持是可用的，但就像您看到的那样，它仍然存在一些问题。您可能想向 Webkit/Chrome/Safari 元素报告您看到的错误。我知道有一个相当容易找到的 Chromium 错误报告页面，但不确定其他两个。

这里有两个解决方法:

1. 您可以通过移除 2px border 并设置 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;).这会有一些缺点，因为它只是 Chrome/Safari 的修复程序 example jsfiddle

2. 当然，另一种选择是编辑照片，使它们具有圆 Angular (http://www.roundpic.com/ 是一个很好的网站)