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