css3の線形グラデーション構文の詳細説明（コード例）-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2018-11-05 14:54:27

オリジナル

4834 人が閲覧しました

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

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

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

ログイン後にコピー

効果:

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

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

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

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;);
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;)";
	
	/* 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度」に相当します。 css3の線形グラデーション構文の詳細説明（コード例）

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

終了色と位置

終了位置

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

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

ログイン後にコピー

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

レンダリング:

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

終了色

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

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

ログイン後にコピー

レンダリング:

css3の線形グラデーション構文の詳細説明（コード例） # 線形グラデーションに関するいくつかのメモ:

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

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

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

要約

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

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