CSS3 で線形グラデーションのブラウザ間互換性を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 で線形グラデーションのブラウザ間互換性を実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-23 00:57:11

オリジナル

908 人が閲覧しました

How Do I Achieve Cross-Browser Compatibility for Linear Gradients in CSS3?

CSS3 の線形グラデーションのブラウザ間サポート

問題点

今日の Web 開発環境では、ブラウザ間の互換性が最も重要です。ブラウザ間で一貫したグラデーション効果を実現するには、開発者は特定の機能で課題に直面する場合があります。この記事では、Opera と Internet Explorer の CSS3 での線形グラデーションの実装について説明します。

ブラウザの代替手段

Opera と IE の場合、ベンダープレフィックスを使用した背景グラデーションの同等のコードは次のとおりです。

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

ログイン後にコピー

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

水平方向のグラデーションを作成するには、構文を次のように変更します。

background-image: -webkit-linear-gradient(left, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(left, #0C93C0, #FFF);

ログイン後にコピー

プレフィックスの説明

特定のブラウザとの互換性を示すために、実験用 CSS プロパティがプレフィックスとして付けられます。

-webkit- Webkit ブラウザ用(Chrome、Safari)
-moz- 用Firefox
-o- Opera の場合
-ms- Internet Explorer の場合
標準実装のプレフィックスなし

Internet Explorer のサポート

IE バージョン 10 未満の場合は、次を使用しますsyntax:

/*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)";

ログイン後にコピー

構文の説明

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

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

ログイン後にコピー

RGB HEX の代わりに ARGB カラー形式を使用できます。。 GradientType はオプションであり、大文字と小文字は区別されません。

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