CSS放射状グラデーション
CSS放射状グラデーション
放射状のグラデーションは、その中心によって定義されます。
放射状のグラデーションを作成するには、少なくとも2つのカラーストップも定義する必要があります。
構文
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
デフォルトでは、形状は楕円で、サイズは最も角が大きく、位置は中央です。
ラジアルグラデーション-等間隔のカラーストップ（これはデフォルトです）
次の例は、カラーストップが等間隔に配置された放射状グラデーションを示しています。
例
#grad {
background-image: radial-gradient(red, yellow, green);
}
ラジアルグラデーション-異なる間隔のカラーストップ
次の例は、カラーストップの間隔が異なる放射状グラデーションを示しています。
例
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
形状を設定
形状パラメータは形状を定義します。値の円または楕円を取ることができます。デフォルト値は楕円です。
次の例は、円の形をした放射状のグラデーションを示しています。
例
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
異なるサイズのキーワードの使用
サイズパラメータは、グラデーションのサイズを定義します。次の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);
}
放射状グラデーションを繰り返す
repeat-radial-gradient（）関数は、放射状グラデーションを繰り返すために使用されます。
例
繰り返しの放射状グラデーション：
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}