5

有没有办法创建一个真正的圆形 div 以便overflow:hidden可以将 div 中的所有内容隐藏在圆形区域之外？

我尝试使用border-radius, -moz-border-radius, -webkit-border-radius但overflow:hidden只隐藏正方形/矩形区域之外的东西。border-radius确实只是给人一种圆的错觉。

然后我想我可以创建一个PNG图像，中间有一个透明的圆形区域，周围是不透明的“类似背景”区域，以隐藏圆形区域之外的东西，但这又是另一种错觉，当背景不是静态的，而是会根据屏幕宽度和高度而相应变化。

那么我怎样才能制作一个真正的圆形div呢？通过 CSS 还是 JS 的意思？

4

2 回答 2

2

按照这些链接可能对您有帮助http://www.css3.info/preview/rounded-border/
http://border-radius.com/
http://www.w3schools.com/cssref/css3_pr_border-radius .asp

于 2013-01-30T09:58:56.987 回答
2

感谢你们的评论。

我刚刚想通了。事先我只设置border-radius, -moz-border-radius, -webkit-border-radius而不设置，border:1px solid [color]因此导致形成圆形区域而无法overflow:hidden正常工作。CSS3 的另一个奇怪行为。

于 2013-01-30T09:59:29.517 回答