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

さまざまなブラウザでの線形グラデーションの実装

ブラウザ間の互換性

問題: 線形グラデーションのブラウザ間の互換性を取得するグラデーションは次のように指定します:

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Opera および IE の代替:

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

垂直グラデーションと水平グラデーション

グラデーションを変更するには垂直ではなく水平の場合は、開始点と終了点に次の値を使用します。

top left
top right

例:

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

Internet Explorer < 10

10 より前の Internet Explorer バージョンの場合は、次のコードを使用します。

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

説明

• プレフィックスは実験的な CSS プロパティに使用されます。

  • -webkit- Webkit ブラウザー (Chrome、Safari) の場合
  • -moz- Firefox の場合
  • -o- Opera の場合
  • -ms - Internet Explorer の場合
• 接頭辞のない直線勾配は、CSS 仕様に完全に準拠していることを示します。

参照

• [ MDN: 線形勾配](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

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