css3 背景色グラデーション属性 互換性テストの基本環境は、Windows システム IE6.0+、Firefox4.0+、Chrome4.0+、Safari4.0+、Opera15.0+_html/css_WEB-ITnose

CSS3 背景色グラデーション属性の互換性テストの基本環境は次のとおりです: Windows システム、IE6.0 以降、Firefox4.0 以降、Chrome4.0 以降、Safari4.0 以降、Opera15.0 以降

構文:

< ; 線形グラデーション>：線形グラデーション([ <ポイント>]? <カラーストップ>[, <カラーストップ>]+);

<ポイント>：[左 | 右] ? [ 上 | 下 ]?

: [ グラデーションの開始点の位置。 right: 右側をグラデーション開始点の横軸値として設定します。 top: 頂点をグラデーション開始点の縦座標値として設定します。 Bottom: グラデーション開始点の縦座標値として底部を設定します。 : 角度値を使用して、グラデーションの方向 (または角度) を指定します。 : グラデーションの開始色と終了色を指定します。 : 色を指定します。カラー値を参照 : 長さの値を使用して、色の開始位置と終了位置を指定します。負の値は許可されません : 開始カラー位置と終了カラー位置をパーセンテージで指定します。

手順:

線形グラデーションのある画像を作成します。

Firefox は、グラデーションの開始点を定義するための 、、および center の特別な値の使用、および開始点と角度の使用もサポートしています。

サンプルコード:

(図 1)

linear-gradient(#fff,#333);linear-gradient(top,#fff,#333);linear-gradient(bottom,#333,#fff);linear-gradient(-90deg,#fff,#333);

上記の数行のコードで (図 1) のようなグラデーション効果を実現できます

Comp能力:

ライトグリーン =サポートされています

赤 = サポートされていません

ピンク = 部分的にサポートされています

IE Firefox Safari Chrome Opera

6-9 #1

4.0-15.0 -moz-

4.0-6.0 -webkit-4.0-25.0 -webkit- #215.010.016.06.126.0

	IE5.5-9.0 は、この効果を実現するためにプライベートフィルターを使用します。 gid:DXImageTransform.Microsoft.Gradient()	chrome4.0-9.0 は古い構文を使用します: -webkit-gradient(linear,…)