CSS3のグラデーションプロパティとは何ですか?

css3 のグラデーション属性には、linear-gradient、radial-gradient、conic-gradient、repeat-linear-gradient、repeat-radial-gradient などが含まれます。詳細な紹介: 1. リニア グラデーション、リニア グラデーション、直線に沿ってグラデーションを付けることができ、グラデーションの開始点と終了点、各色の停止点の位置と色などを指定できます。

CSS3 の gradient プロパティでは、開始色と終了色の間の遷移を指定することで、滑らかな色の遷移効果を作成できます。 CSS3 で一般的に使用されるグラデーション属性は次のとおりです:

1. Linear-gradient: 直線に沿ってグラデーションできる線形グラデーション。グラデーションの開始点と終了点、および各カラーストップの位置とカラー値を指定できます。

たとえば、赤から青への線形グラデーションを作成するには、次のコードを使用できます:

background: linear-gradient(red, blue);

2.radial-gradient: 中心点から外側に放射できる放射状グラデーション。 。グラデーションの開始と終了の中心点、および各カラーストップの位置とカラー値を指定できます。

たとえば、中心から外側に放射状のグラデーションを作成するには、次のコードを使用できます:

background: radial-gradient(circle, red, blue);

3. conic-gradient: 円錐グラデーション、円錐に沿ってグラデーションを作成できます。 。グラデーションの開始角度と終了角度、および各カラーストップの位置とカラー値を指定できます。

たとえば、赤から青への円錐グラデーションを作成するには、次のコードを使用できます:

background: conic-gradient(red, blue);

4. 繰り返し線形グラデーション: 繰り返し線形グラデーションは、指定された範囲内で繰り返し適用できます。エリア 線形グラデーション。グラデーションの開始点と終了点、および各カラーストップの位置とカラー値を指定できます。

たとえば、赤から青への繰り返しの線形グラデーションを作成するには、次のコードを使用できます:

background: repeating-linear-gradient(red, blue);

5.repeat-radial-gradient: 繰り返しの放射状グラデーション。指定された範囲内にすることができます。エリア 放射状のグラデーションを繰り返し適用します。グラデーションの開始と終了の中心点、および各カラーストップの位置とカラー値を指定できます。

たとえば、中心から外側に放射状に広がる繰り返しの放射状グラデーションを作成するには、次のコードを使用できます。

background: repeating-radial-gradient(circle, red, blue);

上記の一般的に使用されるいくつかのグラデーション プロパティに加えて、CSS3 には次のようなプロパティもあります。他のグラデーション プロパティ (グラデーション角度、グラデーション形状など)。目的の効果を実現するために、特定のニーズに応じて適切なグラデーション属性を選択できます。

以上がCSS3のグラデーションプロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。