CSS：背景のための線形勾配。線形グラデーション（）：バックグラウンドでの線形グラデーション

グラデーション - 選択した領域を滑らかな遷移を持つ一連のカラーシェードを埋めます。勾配は、2つ以上の指定された色の色合いの間の滑らかな遷移を表示するために使用されます。グラデーションの例

以前は、背景画像を使用して勾配効果を作成した。これで、CSS3を使用してグラデーションの背景を作成できます。 CSS3グラデーションを持つ要素は、ゼロウス接続された背景画像よりも増加すると、勾配が指定された領域の直下にブラウザによって生成されるため、よりよく見えるほうがよいです。

CSSグラデーションは、ブラウザによって作成された背景画像であり、背景色ではなく、Background-Imageプロパティの値として定義されます。つまり、グラデーションは、バックグラウンドイメージプロパティの値としてだけでなく、バ\u200b\u200bックグラウンドイメージをリストスタイルイメージと背景に挿入できるところも指定できます。

CSS3は2種類のグラデーションを定義します。

線形グラデーション（線形勾配） - 色から色への滑らかな遷移。
ラジアルグラデーション（ラジアルグラデーション） - 色から色への円滑な移行は、すべての方向のある点からです。

線形グラデーション

線形勾配が直線で広がると、ある色の色から別の色合いへの滑らかな遷移を示します。線形勾配（）関数を使用して線形勾配が作成されます。関数は、指定された色の間の線形勾配である画像を作成します。勾配のサイズは、それが適用される要素のサイズに対応する。

linear-gradient（）関数は、次のセミコロン引数を取ります。

最初の引数としては、勾配線方向の方向を決定する角度やキーワードがある。オプションの引数
リストの位置に続くことができる2つ以上の色からなるリスト共有リスト。

最も簡単な線形グラデーションでは、最初の色と最終色を定義する引数が2つだけです。

div（ブラック、ホワイト）;幅：200ピクセル;高さ：200ピクセル; try»

2つの引数の関数が送信されると、上からの初期点で垂直方向の勾配が取り付けられています。

グラデーションラインの方向は、2つの方法で決定できます。

第1の引数としての角度の使用は、勾配線の角度の角度の角度を転送することができ、例えば、勾配の方向を決定することができ、例えば、勾配の方向を決定する（England度から切り取る）はグラデーションラインを決定する。要素の上部に下限が上に囲まれて、角度90DEGは、右側に左右に残す傾斜線を決定します。単純に置くと、正の角度はそれぞれクロックにそれぞれ正の回転です。最初の引数としてキーワードを使用すると、「TOP TO TO TOP」、「右」、「右端」、「左から左」に送信することもできます。「0DEG」「90DEG」「180DEG」「270DEG」それぞれ。

2つのキーワードを使用して角度を右上に設定することもできます。グラデーションラインは右上隅に向けられます。

さまざまな方向に指定されたグラデーションの例：

div（マージン：10ピクセル;幅：200ピクセル;高さ：200ピクセル; float：左;）※（左、黒、赤）;）#two（バックグラウンドイメージ：リニアグラデーション（左上、黒、赤） ;）#three（バックグラウンド画像：リニアグラデーション（65deg、ブラック、黄色）;）試してください」

既に述べたように、線形グラデーションは、カンマによって区切られた2色以上のリストを含み得る、ブラウザは利用可能な領域全体でそれらを均等に分散させることができる。

div（マージン：10ピクシ;幅：200ピクセル;高さ：200ピクセル;フロート：左;）※※（背景画像：右、赤、青、黄色）;）#two（バックグラウンドイメージ：線形 - グラデーション（左上、青、白、青）;）試してみてください»

色の後、勾配の初期点と終点に対して色の位置を決定する（別の色が別の色で移動し始める）の停止位置を指定できます。停止位置は、CSSまたはパーセントでサポートされている測定単位を使用して表示されます。興味を使用する場合、勾配線の長さに応じて停止位置の位置が計算される。 0％の値はグラデーションの初期点、100％ - 最後のものです。

div（マージン：10ピクセル;幅：200ピクセル;高さ：200ピクセル; float：左;）※※（背景画像：リニアグラデーション（右上、青、白70％、青）;）#two（バックグラウンドイメージ：リニアグラデーション（右下、黄色10％、ホワイト、赤、黒90％）;）#three（右へ、黒い10％、黄色、黒90％）。

カラー値を指定できます違う方法例：カラー名を指定し、RGB（RGBA）またはHSL（HSLA）構文を使用して16進値（16進数）を使用してください。例えば、透明性を有する勾配の使用は、背景色または勾配の下にある画像と組み合わせて使用\u200b\u200bすることができ、興味深い視覚効果を生み出す。

div（マージン：10px;幅：300ピクセル;高さ：100px;背景色：緑;）#ONE（背景：リニアグラデーション（左、RGB（255,255,0,0））;）#two（背景：線形勾配（RGB（255,255,255,0））;）;）

Vlad Merzehevich

勾配はある色から別の色への滑らかな遷移と呼ばれ、それらの間でいくつかの色があり、それらの間でそれらの間で遷移することができます。勾配の助けを借りて、疑似次元、グレア、背景などのウェブデザインの最も奇妙な影響が作成されます。グラデーションでも、要素は1光子よりもかなりかなり見えます。

実施例1に示すように、背景画像であると考えられるので、勾配を追加するための個別の性質はない。

実施例1.勾配

勾配

ここでは、周囲の慣用句は伝統的に韻律イメージから始まりますが、言語ゲームはアクティブな対話の理解につながらない。

結果この例図1に示す。 1。

図。 1.段落の線形勾配

実施例1で説明した2色の最も単純なケースでは、位置は最初に勾配が始まり、次に初期および最終色を綴っている。

ポジションを書くには、まず、キーワードの上、下、左、右、およびそれらの組み合わせが追加されます。単語の順番は重要ではありません、左上または左上に書き込むことができます。タブで。図1は、＃000および#FFF色および#FFFの色の異なる位置および勾配の種類を示している。

テーブル。勾配の種類

ポジション		description
トップへ	0°	アップダウン。
左へ。	270°	右から左へ。
底へ	180°	トップダウン。
右へ	90°	左から右へ。
左上へ。		右下隅から左上の上にあります。
右上へ		左の左隅から右上へ。
左下に。		下の左上から左上まで。
右下へ		左上隅から右下へ。

キーワードの代わりに、勾配線の傾斜角を設定することができ、勾配の方向を示す。最初に、正または負の角度値が書き込まれ、次に遅れが追加されます。

ゼロ度（または360°）は下部アップからの勾配に対応し、その後、カウントダウンは時計回りに実行されます。傾斜線路の傾斜角のカウントダウンを以下に示します。

左上の値では、2つの斜めに反対の角度ドットを接続するように要素のサイズに基づいて、勾配線の傾斜角と似ています。

2色の複雑な勾配を作成するのに十分ではありません。構文は、カンマを介して色を持ち上げて、それらの無制限の数量を追加することを可能にします。透明な色（キーワード透明）、および半透明を使用することができます。 rGBAフォーマット実施例2に示すように。

実施例2.半透明色

HTML5 CSS3 IE 9 IE 10 CR OP SA FX

勾配

外部の影響にもかかわらず、自由節の起源は、口頭でのメタ言語を反発します。

この例の結果を図4に示す。 2。

図。半透明の花の勾配

色値がパーセント、ピクセル、またはその他の単位の位置を示す後に、グラデーション内の色を正確に位置決めします。たとえば、書くのです赤0％、オレンジ50％、黄色100％これは、グラデーションが赤で始まり、50％がオレンジ色になり、次に黄色の終わりまで。簡単にするために、0％と100％のような極端なユニットは書き込まれませんでした、デフォルトでは意味があります。実施例3では、3つの色の位置を36％に設定する勾配ボタンを作成することが示されている。

例3勾配ボタン

HTML5 CSS3 IE 9 IE 10 CR OP SA FX

ボタン

この例の結果を図4に示す。 3。

図。 3.グラデーションボタン

色位置のタスクのために、あなたは最終的にはモノクロストリップのセットを与える色の間の急激な遷移を得ることができます。したがって、4色を指定する必要がある2色で、最初の2色は同じで、0％から50％まで始まり、残りの色も互いに同じで、50％から100％まで続きます。例では、Webページの背景として4つのストリップが追加されています。極値が自動的に代入されているという事実のために、それらを指定することはできませんので、2色だけを書くのに十分です。

実施例4.単調ストリップ

HTML5 CSS3 IE 9 IE 10 CR OP SA FX

水平ストリップ

典型的なヨーロッパのブルジェイリシティと完全性は公式の言語によって優雅に示されています。

この例の結果を図4に示す。 4.グラデーションの色の1つが透過的に指定されているため、Webページの色を間接的に変わります。

図。水平縞の背景

グラデーションはWebデザイナーの間で非常に人気がありますが、それらの追加はブラウザごとに異なるプロパティによって複雑です。色のセットを示します。グラデーションを作成してコードにそれらを挿入することを簡単にするために、グラデーションを構成し、すぐに目的のコードを取得するのが簡単なWebサイトwww.colorzilla.com/gradient-dittorをお勧めします。準備完了テンプレート（プレビュー）、カラー構成（調整）、エンドコード（CSS）、フィルタを介してサポートするエンドコード（CSS）があります。 Photoshopや他のグラフィックエディタで働いていた人のために、グラデーションの作成は顔のように見えます、残りはすばやく理解するのは難しくありません。一般的に、あらゆる方法で私はお勧めします。

CSSグラデーションを使用すると、2つ以上の色を背景にし、滑らかに1つから別のものに移動できます。彼らは長い間私たちと一緒にいて、ブラウザにかなり良いサポートをしています。最新のブラウザはプレフィックスなしでそれらを理解しています、IE9以前は勾配フィルタがあり、IE9の場合もSVGを使用できます。

グラデーションは、写真が使用されている場所でも使用できます。バックグラウンドでは、リストの速報として、それらはコンテンツまたは境界イメージに指定できます。

線形勾配

線形勾配はかなり使いやすいです。基本勾配の場合、最初の色と最終色を設定するのに十分です。

背景：リニアグラデーション（オルタネージャード、金）。

色は2つ以上の量であり得る。色の勾配と境界（停止点）の方向を制御することもできます。

方向は程度またはキーワードを設定できます。

キーワード： TOP \u003d 0DEG。右\u003d 90° Bottom \u003d 180deg - デフォルト値。左\u003d 270degに。

キーワード例えば左上に対角線勾配を得るために互いに組み合わせることができる。

下記はLILACから黄色への伸縮時に異なる方向と見なすことができます。

これが最初の正方形のコードです。

左上（背景：リニアグラデーション（左上、紫、クリムゾン、オレンジャード、ゴールド）;）

右上には45DEGと同じではないことを思い出してください。勾配色は勾配方向線に対して垂直です。右上にあるとき、線は左下から右上隅まで来て、45DEGはこの角度に関係なく、この角度の下に位置しています。

違いは長方形の数字にはっきりと見えます。

また、勾配色の停止点を設定することもできます。値は単位またはパーセンテージで設定され、100％以上0％未満である可能性があります。

％、EMの設定値の例と、要素の境界を超えて行く値の例：

近い色を止める点が近いほど、よりクリアはそれらの間の境界線になります。したがって、あなたは簡単に縞模様の背景をすることができます：

これは、例えば、親列の下の背景、親要素の高さ全体に伸びることができます。

Sagebarの背景にストリップ - 完全な透明性を交互にすることからなるもう一つの勾配白色透明性30％。半透明の色の勾配は、任意の色の背景の上に適用できるので便利です。

この例の勾配は、ストリップがSidberの背景にのみ配置されるべきであるため、複雑な長いコードによって設定されます。 1ブロックのバックグラウンドですべてをしようとしない場合は、疑似要素を使用してタスクを解決することが可能になります。

制限がない場合、コードははるかに短くなる可能性があります。

ライト（背景：ピーチパフ線形勾配（90deg、RGBA（255,255,0）50％、RGBA（255,255,255,,4）50％）中央中心/ 2EM;）.dark（背景：スチールブルー線形勾配（RGBA（0,0,0,0）50％、RGBA（0,0,0,0,2）50％）中心中心/ 100％1em;）

1行目には、要素の背景色、タイプと方向（色と方向を省略することができます）、3番目のグラデーションの色と境界の色を決定します。そして結果の画像のサイズ。最も重要な部分はサイズです。デフォルトでは、バックグラウンドが繰り返されるため、結果のパターンは要素の背景を埋めます。非常に簡単で理解できます:)

エントリ全体は1行で行うことができますが、読みやすくするためには、特に複雑な勾配のためにいくつか、いくつか書き込むのが便利です。

透明なキーワードが透明な黒を意味し、透明な白ではないことを知っておくことも重要です。そのため、Firefoxで使用するときは、この種のトラブルを得ることができます。

これを回避するために、所望のシェードの完全に透明な色、例えば、RGBA（255,255,255,0）または黒いRGBA（0,0,0,0）を使用します。プロ異なる方法色を設定することができます。

特定の色のRGB表記を学ぶために、使用することができます CSS.COLORATUM.、Lea Verouのツール。

通常の線形勾配に加えて、繰り返し線形グラデーションを作ることができます - 繰り返し勾配

サンプルコード：

背景：繰り返し - リニアグラデーション（緑色、緑.5EM、透明.5EM、透明1EM）。

残念なことに、繰り返し勾配は、重要ではないパターンに適したパターンに適した繰り返しが繰り返します。正確さが必要な場合は、背景サイズと背景繰り返しと組み合わせて線形グラデーションを使用してください。

勾配はボックスシャドウと同じ制限を持っています。それらは別々に色や方向を設定することはできません。これにより、コードの複製と急性勾配の作成が発生した場合にはプリプロセッサを利用する必要があります。

もう1つの制限は、勾配がアニメーション化されていないということです。ただし、ある程度回避することは可能です。

クロスブラウザグラデーションを素早く作成するには、非常に便利なツールがあります。 colorzilla.com/gradient-deitor/。最新のブラウザのコードに加えて、それは9日のための古いIEおよびSVGのためのコードを提供します。

背景管理の基本的な機能と組み合わせて、勾配が与える短い機会画像を使用せずに完全に変化する程度の複雑さの背景を作成する。勾配は複雑で興味深いパターンを作ることができますが、これはまったく異なるトピックです。

転送

singlediv.comプロジェクトに関する翻訳に関する作業は、いくつかのCSSツールが私が考えていたよりも広い使用を持っていることを示しました。しかし、このアプリケーションを見つけることができるようにするためには、その特性の特性を明確に理解する必要があります。線形グラデーションは明るい例になりました。これは彼の作品に使用されているLynn Fisher Virtuosoです。

あなたのサイトにかわいいグラデーションの背景を作りたいですか？背景画像：線形グラデーション（赤、青）。準備ができて！はい、それは少し退屈です。したがって、もっと何かが必要な場合は、CSSおよびMDNページのヒントを使用することをお勧めします。あなたはここにいますか？それから線形勾配が実際に作業するにつれて、いくつかの瞬間を見てみましょう。始めるには、リニアグラデーションの関数で使用できる構文を覚えてみましょう。

線形グラデーション（から<угла> | .. 前<стороны-или-угла>]?, );
この関数は、勾配の角度を決定するオプションの最初の引数を取り、測定単位（度、半径、度、ターンオーバー）またはキーワード（側面または角度）を使用して表現できます。

その後、関数は色のリストを取ります。

勾配の分野

グラデーション画像にはサイズがありませんが、他の背景画像とは無限にありません。目に見えるサイズはそれに勾配フィールド、すなわち表示されている領域。

ルールとして、DOM要素への線形勾配の形で背景画像を適用すると、この領域は要素境界のフレーム（背景色が表示される領域です）です。

この場合、CSSプロパティの背景サイズ（背景サイズ）を使用してインストールする場合は、200px * 200pxで、グラデーションフィールドにこのサイズがあり、デフォルトで左上隅に配置されます。背景位置をインストールしない限り、DOM要素の。

したがって、次のセクションを読むには、グラデーションフィールドが常にこのグラデーションを使用するDOM要素と同じディメンションと同様であるとは限らないことを忘れないでください。

ライングラデーション

グラデーションフィールドでは、中心を通過するラインと色が分布しているラインがグラデーションラインと呼ばれます。この回線は、勾配の角度の明確化中に簡単に説明することができるので、これは次のセクションでさらに詳細に説明します。

コーナーグラデーション

線形勾配の角度が、勾配がどの方向に行くかを決定するために使用されることは非常に明白です。しかし、この側面をもっと検討しましょう。

Cが勾配視野の中心点である場合、Aは、通過する垂直線と勾配線との間の角度、および勾配の停止色が流通する。

この角度は2つの方法で定義できます。

キーワードの1つを使用して、上位（上）、下（左）、左（左）に、左上（左上）、左上（左上）、右下（右下）に下（右下）左（左下）;
または測定単位の角度を決定することによって、例えば45deg（45度）、1utn（1回転）。

角度が指定されていない場合は、デフォルトでガイドダウンされます（つまり、180度または0.5ターンです）。

これにより、次の画像では、勾配視野は長方形によって制限され、傾斜線は中心を通過する脂肪灰色の線であり、その色が表示される。

上記の例では、角度は指定されていないので、白から赤へのグラデーションは上から下へ移動し、次に示すように、キーワードに対応します。

そして、次の2つの画像に示すように、上（上）にゼロ度の角に対応します。

他の大会角度のキーワードを使用する価値がある（右上）、例えば（または他のキーワード角度）はグラデーションフィールドのサイズに依存する価値があります。

ロジックは、要素の直角角度の方向に赤から青へ勾配を作りたいと思った場合、そのような要素は右上隅に青く、勾配の真ん中の紫色はすべきです。右下隅の左上から通過する線の周りに形成します。これはイメージの中のどのように見えるかです。

したがって、右上（右上）では、勾配ラインが右上の角度を通過することを意味するわけではなく、勾配の角度が45度であるという意味ではありません。

次のアニメーションを使用して、角度が変更されたときにグラデーションラインがどのように移動するかを見てみましょう。

このアニメーションでは、角度は0から360度の増加して10度増加します。低解像度GIFであっても、常にグラデーションラインに対して常に異なる色が表示されている方法をよりよく検討することができます。

グラデーションの角について知っていることを覚えてみましょう。

角度は勾配線と線の間で測定され、これは勾配領域の中心から出て上に移動します。
したがって、0度を意味します。
角度の標準値は、指定されていない場合は下向きで、180度です。
角度のキーワードは勾配磁界の大きさに依存します。

グラデーションラインの長さ

グラデーションラインに沿った色がどのように配布されるかがわかる前に、1点を説明する必要があります。前回のアニメーションでは、色がグラデーションフィールドの外にあることがあることがある前回のアニメーションで気付いたかもしれません。

例を見てください：

45度の角度で赤から青へ勾配が必要であり、勾配場のアスペクト比の観点から、勾配線は右上の角度を通過することができない。

しかし、ブラウザが望んでいる（つまり、仕様はそれを強制します）右上隅を純粋な青にします。勾配ラインが現場の縁に始まって終わったように行われた場合、青い色はほとんどのフィールドを取り、勾配は壊れていないでしょう。

したがって、これを行うために、グラデーションラインはグラデーションフィールドを超えることがあります。同時に、それが始まる場所、そしてそれが終わる場所を見つけるのは非常に簡単です。最も近い角度を通過する線を単に描くだけで、グラデーションラインに対して垂直です。このラインがグラデーションラインを横切って、スタート/エンドサイトです。

実際、勾配W、高さH、および勾配の角度の幅を指定した場合、グラデーションラインの長さは次のとおりです。

ABS（W * sin（a））+ abs（h * cos（a））

色

色は、各要素を次のように定義できるコンマで分割されたリストです。
<цвет> [<процентное соотношение> | <длина>]?

したがって、色をグラデーションラインに配置する場所を示す必要はありません。例えば：

色のどれも独自の位置を持っていないので、ブラウザ自体は自分の位置を決定しました。

まさに簡単な例 2色のみで、カラー1は（グラデーションラインの始めに）0％に配置され、カラー2は100％（グラデーションラインの終わり）です。

次に、3番目の色を追加した場合、カラー1は0％のままで、カラー2は50％になり、色は100％100％などです。

上記の例では、500色が指定され、ブラウザはそれらの相対位置を0％、25％、50％、75％、100％と計算しました。これの理由は、グラデーションフィールドに沿った均一な分布です。

色の位置は、（勾配線の大きさに関して）またはCSS長さの形式（任意の単位が有効である場合）の形式で表すことができます。 cSS測定).

これが例です。

ご覧のとおり、5つの静止色のそれぞれは、それぞれ独自の位置を画素単位で指定しています。これらの規定は勾配線の始まりから計算されます。

そのような位置を使用すると、いくつかの興味深い効果が得られます。たとえば、グラデーションを描画しないようにグラデーションを使用できますが、複数の色を残すことができます。

7色以上の画像では、次の色が後者とまったく同じ位置で始まるように設置されているため、ブラウザは2つのストップ花勾配の間のスペースを埋める必要がないことを意味します。

もちろん、それはすべてかわいくて面白いですが、あなたが既婚色で配置された色を混ぜるとどうなりますか？その後、ブラウザがより多くの機能を強制し、あなたが位置を示さなかった色を自動的に分配するように依頼します。

この簡単な例では、2番目の色（オレンジ）には位置がありませんので、ブラウザ自体はそれを決定し、以前に定義された色と次の色の間に適切な場所を見つけます。ここでは、2番目の色のすぐ近くの位置に位置しているので、一部の色でのみ位置がある場合、または前方または次の色が位置を持たない場合は、すべてが複雑である場合は非常に簡単です。

いくつかの例を見てみましょう。

上記の例では、30％で配置された3番目の色（黄色）のみです。したがって、すべての残りをよりよく分配するために、最初は0％に配置され、後者は100％、残りの色はギャップに分布しています（オレンジ色は0％から30％の間で直接0と赤くする。 - 30％から100％の間。

これは、最初と最後の色の上の例であるため、残りはこれら2つの間に均等に分布しています。

もちろん、0％と100％が終了できない厳格なフレームワークであれば簡単になります。しかし、前の例から分かるように、最後の色は120％にあります。したがって、他のすべての色はこの位置に関してそれに応じて分散されるべきです（この場合の初期ポイントは0％のままです）。

また、ブラウザをさらに機能させたい場合は、ポジションの順序を指定しないのですか？

実際、色は注文しなければなりませんが、これを行わないことは何もありません。以下に示すように、ブラウザは単にそれを修正します。

30％に位置する最初の色（赤）から始めましょう。次に、2番目の色は既に正しくありませんが、上記と言われているので、色は位置の早い時期に示されるべきです。したがって、ここではブラウザは2色の位置を補正し、前の色と同じ位置に設定します（30％）。次に、60％に位置する3番目の色（黄色）がありますが、正しいですが、4×40％に続きます。また、位置は調整され、前の位置の色と同じ値に設定されます。

最終的には、上記の例に示すように、最後の色（青）が誤って配置されており、ブラウザは前の色と同じ位置になります。この場合、この場合、彼の即時隣人（黄色）も隣人の色でもありません。それは彼の前に（オレンジ）するので、彼は最初の色（赤）に戻らなければなりません。したがって、赤と青の間のすべての色は30％に設定され、したがって見えない。

楽器

この記事のすべてのスクリーンショットは、コードペンで行った簡単なツールから取得され、線形勾配の機能を入力し、勾配フィールド、グラデーションライン、角度、および色に関する情報を見ることができます。要素

機器ではあらゆる種類のバグと制限があります（JavaScriptのコメントを参照）、それほど期待しないでください。

タグ：

CSS
線形勾配

タグを追加する

a！勾配は操作色のための優れた器具です CSS3。。画像を使用する代わりに、Webページにグラデーション効果を作成するために、利益を得ることになります。 CSS3グラデーション そしてそれによってサイトを「促進する」こと。ユーザーは背景画像のダウンロードで時間とトラフィックを過ごす必要はありません。勾配には2つの主要な種類があります：ラジアルとリニア。今日の投稿はそれらのことになります。

線形グラデーション

分類で言うように、 cSS3の勾配 画像です。それらのための特別なプロパティはありません。そして広告のために背景画像のプロパティを使用します。

一般的な場合は、グラデーションの構文（線形）が次のようになります。

1
2
3
4
5
6
7

div（
背景画像： - ウェブキット - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景画像： - モズ - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景画像：-ms - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景 - 画像：-O - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。

}

それで、順番にすべてについて行こう。

まず第一に、線形勾配が線形勾配（）関数宣言されています。この機能には3つの主な値があります。最初の値は初期位置を決定します。例示的な上に示されたもの上からのソース位置。下、左右を使用することもできます。

角度が負の場合、位置は左下隅から左上に変わります。

関数の2番目の値は初期色とその停止位置です。これはパーセントで示されます。この位置のお知らせは不要です、デフォルトのブラウザは最初の色値が0％に適しています。

最後の値は2番目の色とその停止位置です。デフォルトでは100％の値を取ります。これらの極値の値と彼らは最初の色がすぐに2番目に移動し始めることを意味します。ただし、50％の最初の色をインストールすると、アクセス可能な高さの中央からのみ2番目に移動し始めます。これはコードの外観のようなものです。

高度に同じストリップを手に入れます。明確な境界を持つと、色移行はそうしません。それがどのように機能するかをよりよく理解するために、値を実験してください。

ラジアル勾配と線形勾配が宣言されており、すでにラジアルグラデーション（）しかありません。主な値もあります。これはラジアルグラデーション（円 - 円または楕円 - 楕円）、初期および最終色の形式です。構文は次のとおりです。

div（
背景：ラジアルグラデーション（円、＃F9E497、＃FFAE00）。
}

フォームを指定しないと、楕円はデフォルトでインストールされます。

また、デフォルトはグラデーションの中心位置ですが、変更できます。位置コマンド（上、下、左、右）、およびそれらの組み合わせを設定するか、パーセントまたはピクセルで指定することができます。

チームの組み合わせ：

上部を中心としたトップ - 50％0％。
左上隅に - 左上から0％0％。
右上隅に - 右上 - 100％0％。
中心 - 中心 - 50％50％。
中央に残されて - 左中央 - 0％50％。
中央の右 - 右中央 - 100％50％。
下の中央に - 下 - 下 - 50％100％。
左下の角に - 左下 - 0％100％。
右下隅 - 右下 - 100％100％。

これがパーセンテージの例です。

div（
背景画像：ラジアルグラデーション（70％20％、円、＃F9E497、＃FFAE00）。
}

軸に沿った最初の値 h 第二に w.

また、半径方向勾配をサイズに設定することができます。サイズは勾配の形の後のギャップを通して示されます。デフォルトが適用されました corner corner （遠くに）。計算はグラデーションの中心点から次のように実行されます。

に、例について考えることをお勧めします。白い初期と究極の青の楕円勾配：

div（
背景 - イメージ：ラジアルグラデーション（230ピックス50px、楕円）;
}

サイズは最も近い側面までの距離から計算されます、それは軸に沿って上部が近いことは明らかです y。左軸 バツ。.

そして今遠い側面に：

div（
背景画像：ラジアルグラデーション（230ピクセル50px、楕円形、ホワイト、ブルー）;
}

彼らが顔に言うように結果。サイズは遠方側までの距離から計算されます。

ラジアルでは、色の線形勾配のように、停止位置を適用することができます。色の透明性を達成する必要がある場合は、RGBAを使用してください。

div（
背景画像：線形勾配（上部、RGBA（255,90,0,0.2）、RGBA（255,174,0,0.2））。
}

アルファ運河、最後および0.2のものであるものは、20％が100％から使用されていることを示します。

両方のタイプで CSS3グラデーション 2色を使用できませんが、数色です。

div（
背景画像：リニアグラデーション（上、赤、オレンジ、黄、緑、青、インディゴ、バイオレット）。
}

両方の種の場合、色の繰り返しを使用できます。すなわち、これらの値からサイクルが形成されている。ラジアルのための線形および繰り返しラジアル勾配（）のための繰り返し勾配、繰り返し線形勾配（） - の機能。

div（
背景画像：繰り返しラジアルグラデーション（赤、青20px、赤40px）。
}

0％、＃FFAE00 100％）。 / * Firefox * /
背景画像：-ms - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。 IE 10以降の場合は/ * * /
背景 - 画像：-O - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。オペラ* /のための* /
背景画像：線形勾配（上、＃FF5A00 0％、＃FFAE00 100％）。 / *標準構文* /
}