クロスブラウザーの線形グラデーションを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-21 10:56:11

オリジナル

359 人が閲覧しました

How Can I Create a Cross-Browser Linear Gradient?

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

ブラウザ間で線形グラデーションを実現するには、ブラウザ間の違いを考慮することが不可欠です。 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 サイトの他の関連記事を参照してください。