当前位置：文江博客话题详情

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

发布于 2024-11-29 06:45:40 字数 359 浏览 0 评论 0原文

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

图像应用了 2 像素的边框和 14 像素的半径。

正如您所看到的，图像的角与边框重叠。

此行为仅发生在 Safari 和 Chrome 中，而不发生在 Firefox 和 IE 中。

有人知道为什么吗？

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

http://www.findyourgeek.com/index-copy.php< /a>

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枕花眠 2024-12-06 06:45:40

Chrome/Safari（或更确切地说 Webkit）中对图像的 border-radius 支持似乎有点错误

Chrome -webkit-border-radius 错误？ - CSS-Tricks 论坛

上面的帖子来自今年早些时候（~Chrome 版本 10），当时对图像 border-radius 的支持不起作用。知道可以提供支持，但正如您所看到的，它仍然存在一些问题。您可能想向 Webkit/Chrome/Safari 项目报告您看到的错误。我知道 Chromium 有一个相当容易找到的错误报告页面，但不确定其他两个页面。

这里有两个解决方法的想法：

您可以通过删除 2px border 并设置 2px 描边 box-shadow (box -shadow:0 0 0 2px #606060;)。这会有一些缺点，因为它只是针对 Chrome/Safari 示例 jsfiddle
的
这会有一些缺点，因为它只是 Chrome/Safari 示例 jsfiddle
或的当然，另一个选项是编辑照片以使其圆角（http://www.roundpic.com/ 是个好网站为此）

回复收藏 0 原文

森林很绿却致人迷途 2024-12-06 06:45:40

尝试从图像本身中删除边框样式并将其添加到#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;
}

try removing the border styling from the image itself and adding it to #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;
}

回复收藏 0 原文

~没有更多了~