直線勾配の直線勾配の式:
線形勾配(?[<角度> | <サイドまたはコーナー>、<色-STOP> [、<カラー-STOP>] +);
理解しやすいだろう脳を開始する必要があり、式の線形勾配を参照してください、そしてスピンオフ。
表現のいくつかの実際の開始についてましょう話:
background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);
-上記により理解される
線形勾配([角度又はコーナー] X(0or1)+(長さ又は色空間+ +パーセンテージ)+ [(色空間+ +長さまたはパーセンテージ)XN(N:背景画像> = 1)])。
【角度または角、] *(0or1)
手段
[<角度> | <サイドまたはコーナー>、]?
(色空間+ +長さまたはパーセンテージ)
を意味
<カラーストップ>
[(色空間+ +長さ又は割合)* N(N> = 1 )〕
手段
[<カラーストップ>] +
私は「+」、その上に文字列の間の合併として理解内部の表現を与えています
私はそう理解した最初から、ハロー周りがあるかどうかわかりません。他の暴力で、単純なポイント -
"|" 手段 "または(IEや)"
"?" を意味する "0または1"
「+」を意味する「1つ以上」
または実際のケースの深い理解のために、以下の結果がfirefox38.0に基づいています
直線勾配の角度の知識
身体の部分でHTML -
<div style='width:100px;border:4px solid #3B9768;margin:10px'>
<p style='margin:5px;font-size:12px;text-align:center;'>0deg</p>
<div style='height:90px;margin:5px;background-color:transparent;background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);'></div>
</div>
続いて"は0deg"置き換える"45deg"内側"90deg"、 "135deg"、 "原稿180°"。
結果は-
底部に垂直方向に既定の角度からの直線勾配を時計回りに回転し始めます。
第二に、邪魔二つ以上の色やグラデーション<カラーストップ>
ルック勾配色の複数の例です。
図は、勾配の右方向に水平左、階調の既知の出発点の合計長さで、色に対応した位置に関連して、(長さ又は割合によって決定される)11 <カラーストップ>位置を決定することができます<色ストップ>は、次の<カラーストップ>どのように色勾配の発生を知ることができます。
水平および垂直ウェルの合計の長さは、間違いなく直感的背景ブロックの幅又は高さを理解しました。勾配の角度は、勾配の合計の長さを決定する方法、非水平及び垂直ですか?それは、以下の図で理解されています。
示されるように、勾配の中心線を通る垂直線の勾配、および勾配方向の開始点と終了点は、ブロックが与えられ、そのようにN <色ストップがあり、出発点および勾配の全長を決定することが可能です>、n-1個の遷移領域に分割することができます。
例:
本体部分でHTML -
<div style='width:350px;height:220px;margin:5px;background-color:transparent;background-image:linear-gradient(135deg, #9DC3E6 0%, #F4B183 25%, #C9C9C9 50%, #FFD966 75%, #A9D18E 100%);'></div>
第三に、要約
実際には、線形勾配はピット、楽しい勾配の原則分を理解していません。