3

http://jsfiddle.net/nicktheandroid/F8v2c/3/

2 つの兄弟要素間をシームレスに流れる放射状グラデーションを作成しようとしています。ボタンの右側の 10 ピクセルまたは 20 ピクセルから始まり、「.content」div の約半分まで流れます。

これは、両方の要素のグラデーションを正しく配置するだけで、流れる放射状のグラデーションのように見えるだけだと思います。これが問題です。これをやろうとしましたが、イライラしました。

メニューの背後に背景があるため、下の画像の「機能」の横の部分を単純に「白くする」ことはできません - jsfiddle を参照してください。

たとえば、画像を参照してください。

2 つの要素をシームレスに流れる放射状グラデーションの例

4

1 に答える 1

1

http://jsfiddle.net/F8v2c/9/に jsfiddle の簡単な更新を投稿しました。

ボタンの高さを設定する必要がある位置を計算するには、グラデーションをどれだけオフセットするかがわかります。ボタンには次のものがあります。

padding:10px;
height:21px;

したがって、ボックスの高さの合計は 41 ピクセル
(高さ 21 ピクセル + 上部パディング 10 ピクセル + 下部パディング 10ピクセル) であることがわかります。

したがって、グラデーションの中心をボタンの 10 ピクセル下に配置するには、垂直位置に 51 ピクセルを使用します。ボタンとドロップダウンの両方で同じである限り、水平は問題になりません。ボタンとドロップダウンが同じサイズのパーセンテージでないと機能しないため、円のサイズをピクセル (300px) で設定します。

background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);

ドロップダウンでは、グラデーションの中心が下から 10 ピクセル下にあるのではなく、上から 10 ピクセルであることを除いて、CSS はほとんど同じです。

background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);
于 2011-09-21T23:00:12.413 に答える