2

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

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

4

5 回答 5

2

在您的CSS中添加此代码

div.slides_control a img {border-radius: 12px;}
于 2012-12-19T21:38:29.580 回答
2

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

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

于 2012-12-19T21:39:43.153 回答
2

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

将此添加到您的CSS

  img
    {
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px; 
    }
于 2012-12-19T21:40:05.510 回答
0

这应该有效：

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

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

于 2012-12-19T21:40:55.887 回答
0

非常感谢大家试图帮助我。

似乎有一些 Google Chrome 错误可以防止溢出被隐藏，因为如果您只想设置 div 的样式，border 命令可以正常工作。

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

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

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

于 2012-12-20T20:30:20.427 回答