Internet Explorer 9 以降でグラデーションを実装するにはどうすればよいですか?

Internet Explorer 9 以降のグラデーション

Web 開発の領域では、視覚的に魅力的で魅力的なインターフェイスを作成するためにグラデーションが不可欠になっています。 Internet Explorer 9 は現在レガシーとみなされていますが、グラデーション サポートに関しては依然として論争の的となっています。

IE9 グラデーション プレフィックス クエリ

ある開発者は、IE9 のベンダー プレフィックスについての説明を求めました。 IE9 のグラデーション。独自のフィルターの使用に対する混乱を表しています。これに対処するために、複数のブラウザーにわたる包括的なグラデーションの実装に目を向けます。

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

最新のブラウザー グラデーション

ただし、Web 開発が進むにつれて、IE10 では新しいグラデーションが導入されました。グラデーション構文に続いて、他の主要なブラウザでも同様の実装が行われます。以下は、最新のブラウザーでのグラデーション サポートを示す更新されたコード スニペットです:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

この更新されたコードを使用すると、IE10 以降を含むすべての主要なブラウザーで一貫したグラデーション レンダリングを実現できます。最近のブラウザでは、色の定義に 16 進表記の代わりに rgb/rgba 値の使用もサポートされていることに注意してください。

以上がInternet Explorer 9 以降でグラデーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。