CSS3_html/css_WEB-ITnose を通じて背景画像の色のグラデーションを実現する方法

Web サイトの人気が高まるにつれ、CSS3 と HTML5 が Web サイトのフロントエンド開発の主流になることは間違いありません。特にモバイル側では、ハイエンドのブラウザーがフロントエンド エンジニアに言葉では言い表せない経験をもたらしました。

CSS3 は、平たく言えば CSS 技術のアップグレード版と言え、CSS3 の言語開発はモジュール化に向けて発展しています。以前の仕様はモジュールとして大きすぎて複雑だったので、より小さなモジュールに分割され、さらに新しいモジュールが追加されました。これらのモジュールには、ボックス モデル、リスト モジュール、ハイパーリンク メソッド、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどが含まれます。そこで、今日 Ma Haixiang のブログで最初に皆さんと共有したいのは、CSS3 グラデーションです。

まず、新しい gradient gradient 構文を見てみましょう。新しい構文には 4 つの勾配関数が含まれています:

linear-gradient()
radial-gradient()
repeat-linear-gradient()
repeat-radial。 -gradient()

これらの関数名については、あまり説明する必要はありません。円形グラデーション Web デザインについては、後で Ma Haixiang のブログで詳しく説明します。

仕様はまだ予備草案の段階にあるため、これらの勾配関数には -webkit- という接頭辞を付けています。将来、仕様が草案段階でなくなった場合には、プレフィックスなしで使用できるようになります。

1. 線形グラデーション (線形グラデーション)

要素ボックス モデルを線形グラデーションで塗りつぶすために最も一般的に使用されます。グラデーションがどの方向から始まるかを考えればよいだけです。馬海祥氏によると、指定方法は2つあるという。

まず、グラデーションが開始する方向またはコーナーを指定できます:

linear-gradient(left、white、black)

linear-gradient(top right、white、black)

あなた最初の引数を省略することもできます。これにより、デフォルトで top が指定され、垂直方向のグラデーションが与えられます。

2 番目に、グラデーションの角度を指定できます:

linear-gradient(135deg、white、black)

角度は反時計回りに回転し、0 度の場合は左から右へです。

これらすべての場合において、勾配は要素ボックス モデルを満たすのに十分な大きさであることに注意してください。

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

放射状グラデーションはより複雑で、塗りつぶすときにより多くのオプションがあります。

Ma Haixiang は、最も単純な形式は、要素ボックス モデルの中心をグラデーションとして開始し、外側に向かって隅々まで塗りつぶすことであると考えています。

radial-gradient(white, black)

これは、radial と同等です。 -グラデーション(中央、楕円カバー、白、黒)。

最初のパラメータはオプションで、デフォルトは center です (background-position と同じように) 原点を他の場所に配置することもできます:

radial-gradient(10% 30%, white, black)

原点位置の背後にあるパラメータは、グラデーションの形状とサイズを指定するために使用されます。これは 2 つの方法のうちの 1 つです。

このメソッドでは、いくつかのキーワードを使用して形状 (円、楕円) とサイズ (最近接側、最近接角、最遠側、最遠角、包含、カバー) を記述します。例:

radial-gradient。 ( 30% 30%、最近接コーナー、白、黒)

radial-gradient(30% 30%、円の最近接コーナー、白、黒)

必要に応じて、放射状グラデーションを個別に指定することもできます水平方向と垂直方向の終了半径:

radial-gradient(center, 5em 40px, white, black)

3. 繰り返しグラデーション (繰り返しグラデーション gradient)

グラデーションの繰り返し繰り返し-linear-gradient() と繰り返し- radial-gradient()

はまったく同じ短縮構文を持ち、グラデーション全体がループ内で塗りつぶされます:

repeat-linear-gradient(left, red 10%, blue 30%)

これらのストップはループする 端から端まで調整するために使用します。これにより、色間の強い変化が生じることがよくあります。

ループの終わりの色を避けることができます:

repeat-radial-gradient(左上、円、赤、青 10%、赤 20%)

4. カラーストップ

グラデーションのカラーストップを指定するのは簡単です。最も単純な場合は、色のリストを指定するだけです:

linear-gradient(left、red、green、blue)

これにより、すべての色が均等に分散されます。上のグラデーション。 Web フロントエンド

必要に応じて、個々の色に特定のストップを配置し、ブラウザに残りを割り当てさせることもできます:

linear-gradient(左下、赤 20px、黄、緑、青 90% )

それらグラデーション軸が対角線の場合、パーセンテージは対角線の長さに対応します。

同じ色で停止すると、色間の強い遷移が生じます:

線形グラデーション(左上、赤、黄、緑60%、紫60%、青)