CSS3の背景グラデーションについて

CSS3のグラデーションに関しては、現時点では主要なブラウザが十分にサポートしていないため、使用する際には主要なブラウザのプレフィックスを追加する必要があります。

-moz-: Mozilla コアを使用したブラウザ (Firefox ブラウザ)

-webkit-: Webkit コアを使用するブラウザ (Chrome、Safari ブラウザ)

-o-: Opera コアを使用したブラウザ (Opera ブラウザ)

ここではIEについてはあまり紹介しませんし、この記事では背景色のグラデーションについてIEは考慮していません

1つ。線形グラデーション

1.構文: -moz-linear-gradient(/,,……)

パラメータ: 最初のパラメータは線形グラデーションの方向です

上: 上から下へ。

左: 左から右へ;

右: 右から左へ;

bottom: 下から上へ;

左上から：左上、右上から：右上など、ペアで組み合わせる事もできますが、ここではあまり紹介しません

角度は角度を表します（角度を含む平面直交座標系は十分直感的だと私は常々思っています）。

2番目のパラメータと3番目のパラメータは、それぞれ開始点と終了点の色です。複数の色のグラデーションを表すために、それらの間にさらにパラメータを挿入できます。色は16進数の数値表現をサポートしています。 a) 数値

例: 背景:-moz-linear-gradient(top,#000,#fff);

注：#000から#fffまでのグラデーションを表します

背景:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

注: 0-50% は #000、50%-100% は #555 を意味します

2.

文法: -webkit-linear-gradient(/,,...) [新しい文法記述ルール]

-webkit-gradient(,/,/,,... ) 【古い文法の書き方ルール】

新しい文法の書き方ルールは他のものと同じなので、ここではあまり紹介しません。古い文法ルールは次のとおりです。

パラメータ

: 最初のパラメータは、線形 (リニア) または放射状 (放射状) のグラデーション タイプを表します。

2 番目のパラメータと 3 番目のパラメータは、グラデーションの開始点と終了点を表し、座標またはキー値を指定できます。 4番目と5番目のパラメータはそれぞれ開始点と終了点の色を表し、それらの間にさらにパラメータを挿入して複数の色のグラデーションを表すこともでき、色は16進数の数値表現をサポートしており、rgb( a も使用できます。 ） 数値。

例：background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#000));

注: #fff から #000 までの上から下へのグラデーションを表します

背景:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));

注: 左上から右下に向かって、0 ～ 50% が白、50% ～ 100% が黒で、透明度は 0.2 であることを意味します

3.

構文: -o-linear-gradient(/,,…)

例: 背景:-moz-linear-gradient(top,#000,#fff);

注：#000から#fffまでのグラデーションを表します 2つ。放射状グラデーション

構文: -moz-radial-gradient(/,/,,…);

-webkit-radial-gradient(/,/,,…);

oprea ブラウザの放射状グラデーションのサポートはまだ十分ではないため、ここでは紹介しません。線形グラデーションで見られる実際の位置、方向、色に加えて、放射状グラデーションでは、グラデーションの形状 (円と楕円)、およびサイズ (最も近い側、最も近い角)、最も遠い側、最も遠い角を指定できます。 、含む、覆う。これらの設定サイズにはほとんど違いがないため、少し混乱します。

例: background:

radial-

gradient(#fff, #000

);

background: -webkit-radial-gradient(#fff) 、#000);

注: 白から黒への円形のグラデーションを表します

背景: -moz-radial-gradient(80% 20%, 最近接コーナー, #fff, #000);

背景: -webkit-radial-gradient(80% 20%, 最近接コーナー, #fff, #000);

注: 80% 20% の位置に白丸から黒へのグラデーションがあることを意味します

2.CSS 繰り返しグラデーション

構文: -moz-repeat-linear-gradient(/,,……);

-webkit-repeat-linear-gradient(/,,…);

-o-repeat-linear-gradient(/,,…);

-moz-radial-gradient(/,/,,…);

-webkit-radial-gradient(/,/,,…);

例: 背景: -moz-repeat-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

背景: -webkit-repeat-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px);

注: これは黒と白の円の円を表します (めまいをしないでください)

この記事は Da Mo のブログ http://www.w3cplus.com/content/css3-gradient からの抜粋です