圆形边框不能在铬工作

我使用jQuery幻灯片，这工作很好。唯一的问题是，它并没有在谷歌浏览器中显示图像“div”的边框，尽管我具体使用了Chrome的CSS圆边框样式。因为我知道几乎所有浏览器都使用自己的代码来创建圆形边框，所以我已经设置了所有浏览器的可用设置。但是，它仍然不适用于Chrome。圆形边框不能在铬工作

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

来源

2012-12-19 Sillo

好的边界半径适用于你的图像“div”，除非它比图像本身大得多，所以你不会看到它，因为一切都是白色的。看到答案添加边界半径到img标签本身 – Huangism

分配CSS的图片代替.slides_container

添加到您的CSS

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

来源

2012-12-19 21:40:05

作为一个好的和robuster的做法，永远把标准规则放在他们的供应商的前缀相当于;-)，以便标准的优先 –

我已经试过这么多次..不工作 – Sillo

我不得不使用.classname img {} ... img本身还不够... – Sillo

添加该代码在你CSS

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

来源

2012-12-19 21:38:29 Enve

我不认为！重要是需要 – Huangism

不，它不是...... – Enve

你的例子确实有圆角，转换过程中可以看到它们。但包含的<a>的宽度比图像宽...使<a>的尺寸与图像相同，或更好更简单，将border-radius应用于<img>。

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

来源

2012-12-19 21:39:43

非常感谢您的帮助:) – Sillo

这应该工作：

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

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

来源

2012-12-19 21:40:55 ijo

它不：/ ...我会回答我自己的问题与适用于所有浏览器的解决方案..但非常感谢你的帮助，我非常感谢..我真的很感激它。 – Sillo

非常感谢大家为了帮助我。

似乎有一些谷歌浏览器的bug，可以防止溢出被隐藏，因为如果你只是想设计一个div，边界命令工作正常。

该解决方案添加以下内容到风格：

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

希望现在像我这样的其他贫困男人不会花了一整夜了寻找一点点的一段代码，可以节省一天。

来源

2012-12-20 20:30:20 Sillo

圆形边框不能在铬工作

回答

相关问题