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

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

CSS3 での線形グラデーションの作成は簡単ですが、ブラウザ間の互換性は難しい場合があります。チャレンジ。 Webkit ブラウザ (Chrome および Safari) と Firefox は、Opera や Internet Explorer とは異なる構文を使用します。

gt;Webkit と Firefox の代替手段

提供されている Webkit と Firefox の構文は、右上から左下への斜めの線形グラデーション。 Opera と Internet Explorer でこれと同じグラデーションを実現する方法は次のとおりです。

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

クロスブラウザの水平方向のグラデーション

水平方向のグラデーションを作成するには、「上部」を置き換えます

Internet Explorer

Internet Explorer バージョン 10 未満の場合は、フィルタを使用する必要があります。プロパティ:

<br>/<em>IE7-</em>/ フィルター: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType =0);<br>/<em>IE8 </em>/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";<br>

< h2>-ms-フィルター構文

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

<br>-ms-filter: progid:DXImageTransform.Microsoft.Gradient(</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

ログイン後にコピー

);

ARGB カラー形式も使用できます。FF は不透明を表し、00 は透明を表します。

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