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

CSS溢出：隐藏在圈内

2 个答案: