CSS放射状グラデーション
CSS放射状グラデーション
放射状グラデーションは、その中心によって定義されます。
放射状グラデーションを作成するには、少なくとも2つのカラーストップも定義する必要があります。
構文
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
デフォルトでは、形状は楕円、サイズは最も遠い角、位置は中央です。
放射状グラデーション - 等間隔のカラーストップ(これがデフォルトです)
次の例は、カラーストップが等間隔に配置された放射状グラデーションを示しています。
放射状グラデーション - 異なる間隔のカラーストップ
次の例は、カラーストップの間隔が異なる放射状グラデーションを示しています。
形を整える
形状パラメータは形状を定義します。円または楕円の値を取ることができます。デフォルト値は楕円です。
次の例は、円形の放射状グラデーションを示しています。
異なるサイズのキーワードの使用
size パラメーターは、グラデーションのサイズを定義します。次の4つの値を取ることができます。
- 一番近い側
- 一番遠い
- 一番近いコーナー
- 一番隅
例
サイズの異なるキーワードを使用した放射状グラデーション:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
放射状グラデーションの繰り返し
Repeating-radial-gradient()関数は、放射状グラデーションを繰り返すために使用されます。
例
繰り返される放射状グラデーション:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。