css3の線形グラデーション構文の詳細説明（コード例）

この記事では、CSS3 の線形グラデーション構文 (コード例) について詳しく説明します。困っている友人は参考にしていただければ幸いです。

線形グラデーションの完全な構文:

.demo  {   
    background: linear-gradient(to left, black, white);
}

効果:

##互換性のある記述方法:

線形グラデーションをサポートされているすべてのブラウザに適用するには、次の操作を実行できます:

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
	
	/* Safari 4 +，Chrome 2+  */
	background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
	
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(right, black, white);
	
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(right, black, white);
	
	/* Opera 11.1 - 12.0 */
	background: -o-linear-gradient(right, black, white);
	
	/* 标准的语法 */
	background: linear-gradient(to left, black, white);
	
}

効果は上に示したとおりです。

グラデーションの角度または開始点

線形グラデーションは、直線のグラデーション ラインを指定し、そのラインに沿って複数の色を配置することによって作成されるグラデーションです。 。設定を通じてグラデーションの方向を指定できます。

グラデーション ラインの方向は 2 つの方法で設定できます。

1. キーワードを使用してブラウザに場所を指示します。グラデーションが始まりますか？

上記の例では、

右から開始して

左に進むように指示しています。これは角度 "-90deg" に相当します。したがって、これは同じ結果を生成します:

background: linear-gradient(-90deg, black, white);

レンダリング:

"270deg" 角度が使用された場合にも、同じ結果が表示されます。 「-90度」に相当します。

したがって、位置キーワード (上、右、左、下) の 1 つを使用するか、特定の角度を数値で指定するだけで、どこから開始するかを判断します。

終了色と位置

終了位置

単純な線形グラデーションを使用すると、 (上の例のように) 位置を指定せずに 2 つの終端色が必要です。ただし、次の例:

background: linear-gradient(-90deg, black 50%, white 100%);

では、パーセンテージ値に各色の位置が含まれていることがわかります。

レンダリング:

これは、各色のグラデーションの開始位置と終了位置をブラウザーに指示します (色の長さを指定します)。ブラウザは実際の勾配を自然に判断します。「段階的な変化」が完全に「停止」する場所を指定するだけです。上の例では、「グラデーション」は要素の左側で停止するため、その要素には完全な白は (たとえあったとしても) ほとんど表示されません。

終了色

カラー ブロックの追加はそれほど複雑ではなくなり、任意の数のカンマ区切りの値を追加するだけです。虹の CSS は次のとおりです:

.demo  {
   background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%)  ;
}

レンダリング:

# 線形グラデーションに関するいくつかのメモ:

1. CSS3 グラデーションは属性ではなく、2 つ目はブラウザによってレンダリングされる画像です。##2. CSS の URL (image.jpg) を介して任意の位置でグラデーションを使用できます。

3. グラデーションを作成するための構文は、実際にはさまざまな値をパラメーターとして受け取る関数です。これは場合によっては便利です。非常に便利です。

#5. カラー終了位置の値は、パーセントまたはピクセルで表現できます。カラー スケールの場合は、-20% などです。 100% を超えるパーセンテージは完全に有効です。

要約

: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がcss3の線形グラデーション構文の詳細説明（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。