CSS3の背景色のグラデーションプロパティ

https://www.cnblogs.com/ningkyolei/p/4623697.html

長い記事を書いて、そして今日について何を並べ替える前に、CSS3の書き込み背景グラデーション、どのようにするとして、あなたは勾配以下の詳細な説明を見ることができます。

プロジェクトでは、多くの場所があるが、線形グラデーションの背景を使用していました。また、適切にモバイル端末で使用することができる場合はCSS3、このプロパティ

CSS3：線形勾配

たとえば、次のように白と黒フェード、次のように：

。勾配{
    背景：-moz直線勾配（100％#FFFFFFトップ、＃000000 0％）。
    背景：-webkit-勾配（線形、左上、左下、色ストップ（0％、＃000000）、色ストップ（100％、＃1 FFFFFF））。
    背景：-webkit-線形勾配（上部、＃000000 0％、100％FFFFFF＃）。
    背景：-O-線形勾配（上部、＃000000 0％、100％FFFFFF＃）。
    背景：-ms-線形勾配（上部、＃000000 0％、＃1 FFFFFF 100％）。
    背景：線形勾配（下に、＃000000 0％、＃1 FFFFFF 100％）。
}

説明：線形勾配固有の使用入力するには、ここをクリックし。

すなわちフィルタ：フィルタ

：私たちは、次のコードを解決するためにフィルタを使用することができますIE8 - IE6のためのように、IE9で、次の線形勾配は、サポートされていません。

。勾配{
    フィルタ：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃000000'、endColorstr = '＃1 FFFFFF'、するGradientType = 0）。
}

フィルタは、私有財産のつまりがあるので、次のように、私たちは、別の治療IE9のフィルタ効果のために必要があります。

：ルート{フィルター：なし;}

要約：

要約すると、のように書かれた互換性の直線勾配は、以下：

。勾配{
    背景：＃000000;
    背景：-moz直線勾配（100％#FFFFFFトップ、＃000000 0％）。
    背景：-webkit-勾配（線形、左上、左下、色ストップ（0％、＃000000）、色ストップ（100％、＃1 FFFFFF））。
    背景：-webkit-線形勾配（上部、＃000000 0％、100％FFFFFF＃）。
    背景：-O-線形勾配（上部、＃000000 0％、100％FFFFFF＃）。
    背景：-ms-線形勾配（上部、＃000000 0％、＃1 FFFFFF 100％）。
    背景：線形勾配（下に、＃000000 0％、＃1 FFFFFF 100％）。
    フィルタ：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃000000'、endColorstr = '＃1 FFFFFF'、するGradientType = 0）。
}
：ルート.gradient {フィルター：なし;}

PS：

実際のプロジェクトでは、多くの場合、具体的には、あなたが上記の文言は、IE9のバグます（IE9で背景色が完全に切断することができない仕上げ）を使用した場合、解決策は、SVGは、丸みを帯びた角と勾配の組み合わせに遭遇こちらをクリックビュー。

Webkitの

MozillaおよびWebkitのは、通常、CSS3プロパティの同じ構文を取るが、徐々に変化のため、残念ながら彼らは合意に達することはできませんが。Webkitのは、以下の構造を使用する、緩やかなブラウザカーネルをサポートする最初のものです：

-webkit勾配（<タイプ>、<ポイント>、<半径>]？<ポイント>、<半径>]？[<ストップ>] *）
/ *実際の使用状況... * /
背景：-webkit-勾配（線形、0、0〜100％（赤）から、）青（へ）。

Webkitの

あなたは、物事を見てできるようになる文法を心配しないでください、私もこのような！ただ、私たちは、このパラメータグループを区切るためにコンマを使用する必要があります覚えています。

タイプ勾配？（リニア）
XY軸は、勾配開始（ - 又は左上0,0）の座標
XYは、勾配の軸端（0〜100％または左下）の座標
色のスタート？（）赤（から）
終了色？（）青（へ）

Mozillaの

Firefoxは、3.6バージョンからグラデーションをサポートするために始めた、とWebkitのは、わずかに異なる構文を好みます。

/ *文法、製造基準：http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-線形勾配（[
<ポイント> || <角度>、]？<ストップ>、<ストップ>、<ストップ>] *）

/ *実際の使用* /
背景：-moz-線形勾配（トップ、赤、青）。

Mozillaの

私たちが--linear--グラデーションタイプ属性の接頭辞を置くことに注意してください
グラデーションどこから始めれば（トップ - 私たちは、このような-45degとして、学位を使用することができますか）？
色のスタート？（レッド）
終了色？（ブルー）

カラーストップ

そうしない場合はどのように100％の別の色のグラデーションに1色から行うには？これは、色の停止作業時間です。：一般的な手法は、次のような、短い設計と微妙なグラデーションを使用することです

微妙なグラデーション
微細な光の上部が白勾配灰色ことに注意してください

過去には、標準的には、画像を生成し、水平タイルさせ、次に、要素の背景画像を設定することです。しかし、CSS3の使用は、これは小さなケースです。

背景：白; / *スタンバイが古い属性を設定またはサポートされていないブラウザ* /
背景：-moz-線形勾配（上部、#dedede、白8％）。
背景：-webkit-勾配（#dedede（から線形、0、0〜8％）、白（へ））。
border-top：1pxの白い固体;

今回は、勾配は、むしろデフォルトは100％以上、8％で終了しましょう。私たちは、コントラストを形成するために、ヘッドフレームを使用していることに注意してください。これは非常に一般的です。

我々は1以上（複数の）色を追加したい場合は、我々はこれを行うことができます。

背景：白; / *バックアップ属性* /
背景：-moz-線形勾配（上部、#dedede、白8％、赤20％）。
背景：-webkit-勾配（#dededeから（線形、0、0〜100％）、色ストップ）（8％、白、色ストップ（20％、赤）。

-mozバージョンのために、我々は、要素の20％が赤色である高さから出発して、定義します。
-webkitのために、我々は2つの引数を取り、色止めを使用します。どこから始めれば停止、使用することを何色。

IE

IEはサポートされていないCSSのグラデーションを、しかし、最も簡単なトランジション効果を得ることができる卒業フィルタを提供します。

フィルタ：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃1 FFFFFF'、endColorstr = '＃FF0000の'）。/ * IE6、IE7 * /
-ms-フィルタ： "プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃1 FFFFFF'、endColorstr = '＃FF0000の'）"。/ * IE8 * /

PS：実際には、我々はIEのソリューションは、上記「RGBA色ブラウザがサポートしている」、卒業フィルタの使用です。

CSSグラデーションに関するいくつかのポイント：

可能な限りそれを使用してください。私たちは、IEユーザーは、固定ソリッド色を見ることができる場合、私はこの方法を使用することをお勧めします。
IE6 / 7月8日、オペラ、サファリ3、Firefox 3のないCSS3グラデーションをレンダリングし、FirefoxとSafariのユーザーが頻繁に頻繁にアップグレードブラウザ、およびChromeの自動アップグレードメカニズムは、バックグラウンドで自動的にアップグレードされますので、これは大きな問題ではありません。
常にデフォルトのブラウザのブラウザアプリケーション私有財産を、これらのソリッドカラーの背景をサポートしていません。
私はこの一例として使用されるように、青色勾配に赤使用することはありません。
内部の各ブラウザでまったく同じページを見てする必要はありません！
Firefoxは方向の傾き角度を設定するために使用される、とだけWebKitの座標x軸とy軸を使用することができます。

グラデーションは、ブラウザの低いバージョンは、開発者が達成するために画像を使用することはできません虹と同様の効果を作成することができ、CSS3のウェブサイトを簡単に効果を移行します。

CSS3グラデーション、PSチュートリアル、地政学的思考チュートリアルネットワークを実現する方法

CSS3のスタイルを定義するために、私たち以上のクエストの直線勾配：

背景画像：-moz-線形勾配（上部、＃の8fa1ff、＃3757fa）。/ * Firefoxの* /
背景画像：-webkit-勾配（線形、左上、左下、色ストップ（0、＃ff4f02）、色ストップ（1、＃8f2c00））。/ * Saf4 +、クローム* /
フィルタ：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃1 c6ff00'、endColorstr = '＃538300'、するGradientType = '0'）。/ * IE * /

-moz-線形勾配は、次の3つのパラメータがあります。最初のパラメータは直線勾配を表します

この単純なを理解するには、以下を見て

A. Webkitのブラウザ

（1）最初に書き込ま。

背景：-webkit-勾配（線形、10％、10％、100％、100％、

カラーストップ（0.14、RGB（255,0,0））、

カラーストップ（0.5、RGB（255,255,0））、

カラーストップ（1、RGB（0,0,255）））。

第一引数：グラデーションの種類です

リニア直線勾配

第二のパラメータ：対応するX、Y方向の傾斜開始位置

三番目のパラメータ：Xに対応する端部位置、Y方向勾配

IV / 5 / Nパラメータ：位置、色勾配が設けられました

（2）第2の書き込みは：そのようなアプローチは比較的単純であるが、効果がより自然です

背景：-webkit-勾配（線形、0、0〜100％から（＃2074af）乃至（＃2c91d2））。

第一引数：グラデーションの種類です

リニア直線勾配

第二のパラメータ：対応するX、Y方向の傾斜開始位置

三番目のパラメータ：Xに対応する端部位置、Y方向勾配

第四パラメータ：色の開始位置を設定します

5番目のパラメータ：終了位置の色を設定します。

二つは.mozillaブラウザ

（1）最初に書き込ま。

背景：-moz-線形勾配（10 90deg、

RGB（25,0,0）14％、

RGB（255,255,0）50％、

RGB（0,0,255）、100％）。

最初のパラメータ：開始位置の傾斜角度を設定して

第二/ III / IV / Nパラメータ：グラデーションの色と位置を設定します

（2）第2の書き込みは：そのようなアプローチは比較的単純であるが、効果がより自然です

背景：-moz-線形勾配（上部、＃のFFC3C8、＃1 FF9298）

最初のパラメータ：勾配の開始位置を設定します

第二のパラメータ：開始位置の色を設定します

三番目のパラメータ：終了位置の色を設定します

三の.IEブラウザ

IEのブラウザは、達成するために、徐々に独自のフィルタを実現するためにIEを使用することができます

フィルタ：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr =＃00FFFF、endColorstr =＃9fffff、grandientType = 1）。

最初のパラメータ：色勾配の開始位置

第二のパラメータ：色勾配終端位置

第三のパラメータ：勾配のタイプ

図1は、垂直勾配横断勾配0を表します

PSは、ここで背景が設定されている場合、フィルタを直接使用する背景を設定する必要はありませんが、他のブラウザと混同しないでください