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

ステッピング属性は、CSS3 仕様に追加された新しい属性です。これを使用すると、Web ページに豊かな色のグラデーション効果を作成し、Web ページにさらに美しさと視覚効果を追加できます。ウェブページを増やします。次にCSS3のグラデーションプロパティの具体的な内容を紹介していきます。

CSS3 のグラデーション プロパティは線形グラデーションと放射状グラデーションに分類され、線形グラデーションは水平方向と垂直方向に分類されます。

1. 線形グラデーション属性

1. 水平方向の線形グラデーション

構文: 背景: 線形グラデーション(右へ、#00FFFF、#FF00FF);

分析: 右へは左から右へのグラデーションを表し、#00FFFF と #FF00FF は色の変化を表し、複数の色の値のセットを設定できます。

2. 垂直線形グラデーション

構文: 背景: 線形グラデーション(下へ, #00FFFF, #FF00FF);

分析: 下へは上から下を意味します下のグラデーション、#00FFFF と #FF00FF は色の変化を表し、複数の色の値のセットを設定できます。

2. 放射状グラデーションの属性

放射状グラデーションの構文は線形グラデーションの構文に似ており、半径の長さの値と 2 つの位置キーワードの 2 つのタイプもあります。このうち、最初の位置キーワードは円の中心を表し、左がx軸方向の負の値、右が正の値、y軸方向が負の値、下が正の値; 2 番目の位置キーワードはグラデーションの開始位置を表します。値の規則は最初の位置キーワードと同じです。

1. 半径の長さの値

構文: 背景: 放射状グラデーション(楕円の最も遠い隅の 45px 45px, #00FFFF, #FF00FF);

分析: ellipse 楕円として表され、最も遠い角は最も遠い角として表され、45px と 45px は円の中心座標、#00FFFF と #FF00FF はグラデーションの色、および色の値の複数のセットを表します。を設定できます。

2. 2 つの位置のキーワード

構文: 背景: 放射状グラデーション(左上、#00FFFF、#FF00FF);

分析: 左上はグラデーションを意味しますcenter は左上隅にあり、#00FFFF と #FF00FF は色の変化を表し、色の値の複数のセットを設定できます。

上記は、CSS3 のグラデーション属性について詳しく説明しました。CSS3 のグラデーション属性を使用すると、さまざまなクールな効果を作成できます。Web ページを美しくするのに大きな役割を果たします。

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