スポンサーリンク
スポンサーリンク

円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、1点から放射状に広がる円形のグラデーションを表示できます。この関数は、画像を扱えるプロパティの値として指定します。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

radial-gradient()関数の引数

形状
グラデーションの形状を以下のキーワードで指定する。形状を省き、数値による指定が1つでもあれば、「circle」「ellipse」が指定されたものとして扱われます。

キーワード 意味
circle
ellipse 楕円

サイズ
グラデーションを描く円または楕円のサイズを、キーワードか長さで指定する。
キーワードの場合は以下から。

キーワード 意味
closest-side グラデーションの形状が「circle」のときは、円の中心から最も近いボックスの辺に、「ellipse」のときは楕円の中心から最も近い縦と横の辺に内接します。
farthest-side グラデーションの形状が「circle」のときは、円の中心から最も遠いボックスの辺に、「ellipse」のときは楕円の中心から最も遠い縦と横の辺に内接します。
closest-corner 円または、楕円の中心から最も近いボックスの核に内接する。
farthest-corner 初期値です。円または、楕円の中心から最も遠いボックスの核に内接する。

開始点
グラデーションの開始点となる円の中心の位置を、
「at 水平方向の位置 垂直方向の位置」のかたちで半角スペースで区切って指定します。この水平/垂直方向の位置は、background-positionプロパティと同じように使い、「実数値+単位」「%値」「top,bottom,center,left,right」のキーワードの組合せで指定する。開始点を省略したときは「center」で指定したものとして扱われます。

カラーストップ
色の値と位置を、半角スペースで区切って指定する。これは線形グラデーションと同じ方法です。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました