Question

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

我没有用HTML和CSS填充这个小页面，而是向幻灯片显示url，你可以根据需要阅读源代码，CSS链接在head标签中。

Answer 1

在 CSS

中添加此代码

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

Answer 2

你的例子确实有圆角，人们可以在过渡期间看到它们。但是包含<a>的内容比图片宽...让<a>与图片大小相同，或者更好更简单，将border-radius应用于{{ 1}}的

此外，Firefox和Chrome已取消对其供应商前缀<img>和-moz-border-radius的支持。只需使用border-radius。

Answer 3

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

将此添加到 CSS

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

Answer 4

这应该有效：

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

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

Answer 5

非常感谢你们帮助我。

似乎有一些Google Chrome错误会阻止溢出被隐藏，因为如果你只想设置一个div，那么border命令工作正常。

解决方案是将此添加到您的风格中：

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

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

圆形边框不在chrome中工作

5 个答案: