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

円形グラデーションを設定する。

CSS

円形グラデーションは、ボックスの中心から外へ広がる
グラデーションで、値は「radial-gradient」で表します。

書き方は以下のように書きます。
background:radial-gradient(contain, #ff5555, #00FF00, #ffffff);
・一番左のcontainの箇所にはサイズを書きます。
 分かりづらいのでサンプルコードをご覧ください。
 ちなみにこの位置に、開始位置・角度・形状も設定できます。
・左から2番目の#ff5555はグラデーションの開始色
・左から3番目の#00FF00はグラデーションの途中色
・左から4番目の#ffffffはグラデーションの終了色

説明
開始位置 left,center,right,top,bottomなどのキーワード、%,pxの数値
角度 degなどの単位を付けた数値
形状 eclipse(楕円),circle(正円)、デフォルト値はeclipse
サイズ closet-side,contain,farthest-side
closest-corner,farthest-cornder,cover(指定範囲に合わせる。デフォルト値)
開始色 開始位置の色。カラーコードやキーワード
途中色 途中色。複数指定可能
終了色 グラデーションが終了するときの色

コメント

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