Question

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

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

如您所见，图像的边角与边框重叠。

此行为仅发生在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错误报告页面，不确定其他两个。

以下是解决方法的两个想法：

您可以通过移除2px border并设置2px笔画box-shadow（box-shadow:0 0 0 2px #606060;）来应用CSS3 hack。这有一些缺点，因为它只是对Chrome / Safari的修复example jsfiddle
或者当然另一种选择是编辑照片以给它们圆角（http://www.roundpic.com/是一个很好的网站）

Answer 2

尝试从图像本身中删除边框样式并将其添加到#content #topStoriesTest

#content #topStoriesTest {

    border: 1px solid #CCCCCC;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    height: 318px;
    overflow: hidden;
    position: relative;
    width: 549px;
}

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

2 个答案: