圆形边框在 chrome 中不起作用答案

【问题标题】：round borders not working in chrome圆形边框在 chrome 中不起作用
【发布时间】：2014-02-16 00:46:33
【问题描述】：

我正在使用 jquery 幻灯片，效果非常好。唯一的问题是，即使我专门使用了 Chrome 的 CSS 圆形边框样式，它也不会在 Google Chrome 中的图像“div”上显示圆形边框。因为我知道几乎所有浏览器都使用自己的代码来设置圆形边框，所以我设置了所有浏览器的可用设置。但是，它仍然无法在 Chrome 上正常运行。

与其用 HTML 和 CSS 填充这个小页面，我宁愿给你幻灯片的 url，如果你愿意，你可以阅读源代码，CSS 链接在 head 标记中。

【问题讨论】：

边框半径适用于您的图像“div”，但它比图像本身大得多，因此您看不到它，因为一切都是白色的。查看将border-radius添加到img标签本身的答案

标签： jquery google-chrome slideshow css

【解决方案1】：

将 CSS 分配给您的图片，而不是 .slides_container

将此添加到您的 CSS

  img
    {
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px; 
    }

【讨论】：

作为一种良好且更稳健的做法，始终将标准规则放在以供应商为前缀的对等规则之后;-) 以便标准规则优先

【解决方案2】：

在您的 CSS

中添加此代码

div.slides_control a img {border-radius: 12px;}

【讨论】：

我认为不需要 !important

【解决方案3】：

您的示例确实有圆角，可以在过渡期间看到它们。但是包含的<a> 比图像宽... 使<a> 的大小与图像相同，或者更好更简单，将border-radius 应用于<img>。

此外，Firefox 和 Chrome 已删除对其供应商前缀 -moz-border-radius 和 -webkit-border-radius 的支持。只需使用border-radius。

【讨论】：

非常感谢您的帮助:)

【解决方案4】：

这应该可行：

#slides_control img {
   border-radius: 3px;
}

您不需要任何浏览器前缀：http://caniuse.com/#feat=border-radius

【讨论】：

它没有：/ ...我会用适用于所有浏览器的解决方案来回答我自己的问题..但非常感谢大家的帮助..我真的很感激。跨度>

【解决方案5】：

非常感谢大家帮助我。

似乎有一些谷歌浏览器的错误可以防止溢出被隐藏，因为如果你只想设置一个 div 的样式，边框命令可以正常工作。

解决方案是将其添加到您的样式中：

#slider{
    border-radius: 10px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

希望现在像我这样的可怜人不会整夜寻找可以挽救一天的代码。

【讨论】：