CSS 渐進的

CSS 渐進的

放射状グラディエントはその中心で定義されます。

放射状グラディエントを作成するには、少なくとも2つの色標を定義する必要があります。

文法

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

デフォルトでは、shape 楕円形に位置します。size 最遠角に位置します。position 中心に位置します。

放射状グラディエント-均等間隔の色標（デフォルト）

以下の例では、均等に間隔を置かれた色標を持つ放射状グラディエントを示しています：

例

#grad {
  background-image: radial-gradient(red, yellow, green);
}

実際に試してみましょう

放射状グラディエント-異なる間隔の色標

以下の例では、色標間の間隔が異なる放射状グラディエントを示しています：

例

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

実際に試してみましょう

形状を設定します

shape パラメータは形状を定義します。それには、circleまたはellipseの値を受け入れます。デフォルト値はellipse（楕円形）です。

以下の例では、円形の放射状グラディエントを示しています：

例

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

実際に試してみましょう

異なるサイズのキーワードを使用して

size パラメータはグラディエントの大きさを定義します。それには、4つの値を受け入れます：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

例

設定した異なる size キーワードの放射状グラディエント：

#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%);
}

実際に試してみましょう

CSS 渐変属性

以下の表に CSS 渐変属性が示されています：

属性 説明
background-image 要素に1枚または複数の背景画像を設定します。