CSS3における「グラデーション」互換性ソリューションの詳細説明

今回は、さまざまなブラウザーにおける一般的なグラデーションの互換性の問題について簡単に説明します。これは比較的単純な問題です。
私たちがよく知っているブラウザには、Chrome、Firefox、Opera、Safari、IE シリーズなどがあります。最も基本的な 背景: #cccccc属性は、ページが #cccccc カラーで表示されることを意味します。もちろん、これはどのブラウザでも問題ありません。ただし、色に対する要件が増加するにつれて、線形グラデーションのグラデーションが導入され、ブラウザーごとに理解するために異なる接頭辞を追加する必要があります。上記の例から、firefox:-moz-、chrome/safari/opera:-webkit-、ie:-ms- がわかります。もちろん、ie の多くのバージョンはこれを受け入れないので、フィルターを使用して対処できます。それと。
IE のフィルター効果に注目してみましょう:

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);

style=0: 統一形状; style=2: 放射状;
startx/starty/finishx/finishy: 開始と終了終点の座標;
gradient=1: 水平方向のグラデーション;

gradient=0: 垂直方向のグラデーション。

-webkit-linear-gradient(top,#ffffff,#000000);
Linear: グラデーションタイプ
トップ: 開始点
#ffffff: 開始色
#000000: 終了色
サポートされているブラウザ: Webkit(-webkit -) ,Gecko(-moz-),presto(-o-),Trident(-ms-)
方向: 上記では、「上」は開始点であり、「下
へ」
< を意味します。 angle>:0deg は方向が左から右であることを意味し、90deg は方向が下から上であることを意味します。正の値とは逆に、負の値で表すことができます。 トップカテゴリー: 開始方向を示すだけです。 2 方向の場合は、left

top などの 2 方向属性を追加するだけです。

追記: これらの変更に対応していないブラウザはまだ比較的少数です。この状況では、最も基本的な背景である #red などを使用して、適切な遷移色を定義できます。 🎜

以上がCSS3における「グラデーション」互換性ソリューションの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。