クロスブラウザーの線形グラデーションを作成するにはどうすればよいですか?

ブラウザ間での線形グラデーションの使用

ブラウザ間で線形グラデーションを実現するには、ブラウザ間の違いを考慮することが不可欠です。 Opera と Internet Explorer (IE) の代替手段は次のとおりです。

Opera

background-image:     -o-linear-gradient(right, #0c93C0, #FFF);

Internet Explorer

IE < 10

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);

/*IE8+*/
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

IE10

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);

水平方向のグラデーションへの変更

水平方向のグラデーションを作成するには、上または下ではなく、左または右の方向を使用します。

実験的な CSS プレフィックス

次のことに注意してください実験的な CSS プロパティでは、プレフィックスを使用して対象のブラウザを示します。

• -webkit- Webkit ブラウザ (Chrome、Safari) の場合
• -moz- Firefox の場合
• -o- Opera の場合
• -ms- インターネットの場合Explorer

Microsoft グラデーション フィルター構文

IE の場合、-ms-filter 構文は次のとおりです。

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
    startColorStr='#0c93c0', /*Start color*/
    endColorStr='#FFFFFF',   /*End color*/
    GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

GradientType はオプションであり、省略できます。

以上がクロスブラウザーの線形グラデーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。