css - CSS溢出：隐藏在圆圈内

Question

我试图隐藏圆形 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

Answer 1

像这样？

.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;
}​

Answer 2

我希望这应该工作

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;
}​