Webkit上的溢出和圆角边框

Question

我正在尝试构建一个圆形区域，其中隐藏的面板可以在圆内滑动。这似乎在Firefox上完美运行，但是，Chrome/Webkit没有“屏蔽”。我假设有某种CSS技巧，这一点，但我一直在敲打我的头靠在墙上迄今...

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

Answer 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。