CSS溢出：隐藏在圆圈内

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

总的来说，我想达到的效果，但使用圆圈-有没有办法做到这一点

小提琴：

编辑：这在Firefox和IE10中很好用，但在Chrome或Safari中却不行

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

像这样

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

---

我希望这能奏效

---

我希望这能奏效

---

它在IE 10中运行良好-用您正在使用的浏览器的详细信息更新您的问题可能与yes有关！看起来是同样的问题。。。有什么解决办法吗？@user1284316:我想它被归类为一个bug。因此，可能没有一个简单的解决方法。对不起，我不知道有哪一个，它在IE 10中工作得很好-用你正在使用的浏览器的详细信息更新你的问题可能与yes有关！看起来是同样的问题。。。有什么解决办法吗？@user1284316:我想它被归类为一个bug。因此，可能没有一个简单的解决方法。对不起，我不知道其中一个。有趣的是，定位是导致它不工作的原因。但是，如果我是您，我会编辑您的解决方案，将

.internal

中的

top

和

left

属性更改为

margin top

和

margin left

，以便正确定位正方形。对于OP来说，是否选择静态元素是一个完全不同的问题。那么你应该使用HTML画布而不是css。我找到了一些关于它的东西，给我一些时间再找一次。尽管如此。。。如果我需要使用绝对位置怎么办？有趣的是，位置是导致它不工作的原因。但是，如果我是您，我会编辑您的解决方案，将

.internal

中的

top

和

left

属性更改为

margin top

和

margin left

，以便正确定位正方形。对于OP来说，是否选择静态元素是一个完全不同的问题。那么你应该使用HTML画布而不是css。我找到了一些关于它的东西，给我一些时间再找一次。尽管如此。。。如果我需要使用绝对位置怎么办？

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