0

電球の形(楕円でもかまいません)の垂直スライダーのプロトタイプを作成する必要があります。http://jqueryui.com/demos/slider/slider-vertical.htmlを使用して開始し、親要素の形状を目的の(今のところ楕円)形状に変更しました。問題は、スライダーをドラッグすると長方形に成長するため、(親要素として)楕円形にならないことです。これを達成するためのより良い方法があるかどうか提案していただけますか。これが正しい方法である場合、スライダーの背景も楕円形にするために、エッジから色をマスクする方法を教えてください。

問題への参照:http ://share.axure.com/UMILTD/

4

1 に答える 1

0

border-radiusCSSプロパティを使用してこの効果を実現することをお勧めします。border-radius親のを設定してシェイプを作成してからoverflow、そのhidden後ろの長方形が透けて見えないように設定できます。

私はここにこれの実例を持っています-http://jsfiddle.net/qUbZf/3/。Chromeにはオーバーフローの処理方法に問題があるようですが、FirefoxとIE9では問題なく表示されます。

IE <9はサポートしていませんborder-radiusが、形状は単にボックスにフォールバックし、引き続き使用できます。

于 2012-05-15T15:53:05.937 に答える