Jquery 圆形边框不适用于镀铬

Jquery 圆形边框不适用于镀铬,jquery,google-chrome,slideshow,css,Jquery,Google Chrome,Slideshow,Css,我使用的是jquery幻灯片,效果非常好。唯一的问题是,在谷歌Chrome中,它并没有在图像“div”上显示圆形边框,尽管我特别使用了Chrome的CSS圆形边框样式。因为我知道几乎所有的浏览器都使用自己的代码来创建圆形边框,所以我设置了所有浏览器的可用设置。但是,它仍然不能像应该的那样在Chrome上工作 与其用HTML和CSS填充这个小页面,我宁愿给你幻灯片的链接,如果你愿意,你可以阅读源代码,CSS链接在head标签中 在您的CSS中添加此代码 div.slides_control a i

我使用的是jquery幻灯片,效果非常好。唯一的问题是,在谷歌Chrome中,它并没有在图像“div”上显示圆形边框,尽管我特别使用了Chrome的CSS圆形边框样式。因为我知道几乎所有的浏览器都使用自己的代码来创建圆形边框,所以我设置了所有浏览器的可用设置。但是,它仍然不能像应该的那样在Chrome上工作


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

在您的CSS中添加此代码

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

您的示例确实有圆角,您可以在过渡期间看到它们。但是包含
的容器将CSS分配给图像,而不是
.slides\u容器

将此添加到您的CSS

div.slides_control a img {border-radius: 12px;}
  img
    {
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px; 
    }
这应该起作用:

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

您不需要任何浏览器前缀:

非常感谢大家帮助我

似乎有一些Google Chrome bug阻止了溢出被隐藏,因为如果您只想设置div的样式,border命令工作正常

解决方案是将此添加到您的样式中:

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

希望现在像我这样的可怜人不会花一整晚的时间来寻找一段可以节省时间的代码。

作为一种良好而有力的做法,总是在他们的供应商前缀后面加上标准规则;-)因此,标准的图像优先考虑边界半径对图像“div”有效,但它比图像本身大得多,所以你看不到它,因为所有的东西都是白色的。请参阅答案,将边框半径添加到img标签中,我不这么认为!重要的是非常感谢你的帮助:)没有:/。。。我将用适用于所有浏览器的解决方案回答我自己的问题。。但非常感谢你们所有人的帮助……我真的很感激。