css - Webkit上的溢出和圆 Angular 边框

我正在尝试构建一个带有隐藏面板的圆形区域，该隐藏面板可以在圆内滑动。这似乎可以在Firefox上完美运行，但是，使用Chrome / Webkit不会出现“掩盖”。我假设对此有某种CSS技巧，但到目前为止，我一直在撞墙...

http://jsfiddle.net/HQDdR/1/

最佳答案

您可以使用径向渐变，然后甚至不需要容器和支架-DEMO。

相关CSS：

#top {
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
#slider {
    height: 600px;
    background: radial-gradient(circle, gainsboro 70.71%, transparent 70.71%)
            no-repeat 0 100%;
    background-size: 300px 300px;
    transition: .3s;
}
#top:hover #slider {
    height: 300px;
}

我已经为滑块的height设置了动画，但是您也可以为background-position设置动画。

关于css - Webkit上的溢出和圆 Angular 边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12074569/