css3 グラデーション gradient_html/css_WEB-ITnose

は、linear-gradient (線形グラデーション) と Radial-gradient (放射状グラデーション) に分けられます。
1. 線形グラデーションは Mozilla で適用されます
構文: -moz-linear-gradient( [ || ,]? , [, ]* )
パラメータは全部で3つあり、最初のパラメータは上から下、左は左上と定義した場合、
それは上からです。左隅から右下隅まで。 2 番目と 3 番目のパラメータはそれぞれ開始色と終了色です。

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

2. Webkit での線形グラデーションの適用

構文: -webkit-linear-gradient( [ || ,]? [, ]* )

-webkit-gradient(, ]? , [, ]? [, ]*)
今のパラメータ: -webkit-gradient は Webkit エンジンの実装です勾配のパラメータは合計 5 つあります。最初のパラメーターはグラデーションのタイプ (タイプ) を表し、線形 (線形グラデーション) または放射状 (放射状グラデーション) にすることができます。 2 番目のパラメーターと 3 番目のパラメーターはどちらも値のペアで、それぞれ勾配の開始点と終了点を表します。この値のペアは、左上 (左上隅) と左下 (左下隅) などの座標またはキー値の形式で表現できます。 4 番目と 5 番目のパラメーターは、それぞれ 2 つのカラーストップ関数です。 color-stop 関数は 2 つのパラメータを受け取ります。最初のパラメータはグラデーションの位置を表し、0 は開始点、0.5 は中間点、1 は点の色を表します。
古い書き方: 背景: -webkit-gradient(linear,center top,centerbottom,from(#ccc), to(#000));
新しい書き方: -webkit-linear-gradient(top,#ccc, #000);

3. Opera での線形グラデーションの適用:
構文: -o-linear-gradient([ || ,]? , [ , ]);
例:background: -o-linear-gradient(top,#ccc, #000);

4. Trident (IE) での線形グラデーションの適用
構文: filter: progid: DXImageTransform。 Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr= #1471da) , endColorstr=#1C85FB)";/*IE8+*/

IE はグラデーションを実現するためにフィルターに依存します。 startColorstr は開始点の色を表し、endColorstr は終了点の色を表します。
GradientTypeはグラデーションの種類を表し、0はデフォルト値で垂直グラデーション、1は水平グラデーションを表します。

1. 中央（横方向）から上（縦方向）、つまり上→下:

/* Firefox 3.6+ */
背景: -moz-linear-gradient(top, #ace, #f96) );
/* Safari 4-5、Chrome 1-9 */
/* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
背景: -webkit-gradient(linear ,top ,from(#ace),to(#f96));

/* Safari 5.1+, Chrome 10+ */

background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10 + */
background: -o-linear-gradient(top, #ace, #f96);

2. 左(水平方向)から開始して中央(垂直方向)も左→右:
/* Firefox 3.6 + */
background: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace , # f96);
/* Opera 11.10+ */

背景: -o-linear-gradient(left, #ace, #f96);

3. 左 (水平方向) と上 (垂直方向) から開始します:
背景: -moz-linear-gradient(左上, #ace, #f96);
背景: -webkit-linear-gradient(左上, #ace, #f96);
背景: -o-linear-gradient(左) top, #ace, #f96);

4. 角度:
角度なしのサンプルコード:

背景: -moz-linear-gradient(left, #ace, #f96);

背景: -webkit-linear-gradient( left, #ace, #f96);
背景: -o-linear-gradient(left, #ace, #f96);
30 度の角度コードを追加します:
背景: -moz-linear-gradient (left 30deg, #ace, #f96);

background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));

background: -o-linear- gradient(30deg, #エース、#f96);