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

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

DDD

リリース： 2024-11-21 01:40:11

オリジナル

813 人が閲覧しました

How Can I Create Cross-Browser Compatible CSS3 Linear Gradients?

CSS3 クロスブラウザー線形グラデーション: ブラウザーの互換性への対処

線形グラデーションを構築する際には、ブラウザー間の互換性を考慮することが重要です。全体にわたって一貫した視覚的な美しさを確保する

Opera および IE の代替案

Opera および Internet Explorer では、次の代替コードを実装できます:

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

ログイン後にコピー

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

垂直方向のグラデーションを変更するには水平方向の場合は、「上」をグラデーション方向の「右」または「左」に置き換えます。例:

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

ログイン後にコピー

Internet Explorer の機能強化

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

ログイン後にコピー

-ms-フィルター構文

Internet Explorer の Microsoft.Gradient の -ms-filter 構文は次のとおりです。

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

ログイン後にコピー

これらのガイドラインに従うことで、開発者は CSS3 で視覚的に一貫した線形グラデーションを作成できます。シームレスなブラウザ間の互換性を確保しながら。

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