CSS溢出：隐藏在圆圈内答案

【问题标题】：CSS overflow:hidden inside circlesCSS溢出：隐藏在圆圈内
【发布时间】：2012-05-28 10:36:30
【问题描述】：

我试图隐藏圆形 div 的溢出。它的子 div 在容器区域之外时隐藏在视图之外（好），但仅在半径区域之外时仍然可见（坏）

.outer{
    position:relative;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: absolute;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}

总的来说，我想在http://buildinternet.com/project/mosaic/1.0 上实现效果，但使用圆圈 - 有没有办法做到这一点？

小提琴： http://jsfiddle.net/a9Feu/

编辑：这适用于 Firefox 和 IE 10，但不适用于 Chrome 或 Safari

【问题讨论】：

它在 IE 10 中运行良好 - 使用您正在使用的浏览器的详细信息更新您的问题
可能与stackoverflow.com/questions/10616668/…有关
是的！看起来同样的问题...任何解决方法？
@user1284316：我认为它被归类为错误。因此，可能没有一个简单的解决方法。我不知道，抱歉。

标签： css

【解决方案1】：

我希望这应该有效

http://jsfiddle.net/a9Feu/35/

.inner{
    position: absolute;
    **border-bottom-right-radius: 100% 110%;**
    top:150px;
    left:150px;
    width: 38px;
    height: 35px;
    background-color: red;
    background:#98de45;
}

【讨论】：

【解决方案2】：

像这样？

.outer{
    position:static;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: static;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}

【讨论】：

有趣的是定位是导致它不起作用的原因。但是，如果我是你，我会编辑你的解决方案，将.inner 中的top 和left 属性更改为margin-top 和margin-left，以便正确定位正方形。去静态元素是否是 OP 的一个选项是另一个问题。
那么你应该使用 HTML canvas 而不是 css。我找到了一些关于它的东西，给我一些时间再找到它。
继续 ScottS...如果我需要使用绝对位置怎么办？