---傾斜線形勾配の背景CSS3プロパティ（）

定義と使用法

線形勾配（）の直線勾配を作成するように機能する「画像」。

線形グラデーションを作成するには、出発点と（角度として指定された）方向トランジション効果を設定する必要があります。あなたは終了色を定義する必要があります。終了あなたはスムーズな移行をヤモリしたい色、そしてあなたは、少なくとも2つを指定する必要がありますが、もちろん、より複雑なグラデーションを作成するために、より多くの色を指定します。

CSSの構文

背景画像：直線勾配（方向、色ストップ1、色STOP2、...）。

方向：指定された勾配方向（角度）の値を有する角度

カラーストップ1、カラーSTOP2は、...：勾配は、開始と終了の色を指定します

ケース

1.既定の勾配方向は上から下へ

背景：リニアグラジエント（黄、緑）

前記勾配の方向が角度値によって定義することができる（角度を書き込むことができます）

背景：直線勾配（トップ、黄、緑）
 * / は0degに対応する底部から頂部に* / 
背景：直線勾配（右に、イエロー、グリーン）
/ * 右に90degに対応する底から* / 
背景：直線勾配（下に、黄、緑）
/ * 下に原稿180°に対応する底から* / 
背景：直線勾配（左、黄、緑）
/ * 270degに対応する底部から左側に* / 
背景：リニアグラジエント（右上には、黄、緑）
/ * の右斜めトップに/ *を

3.色は、開始位置Px又は百分率では0％のデフォルト値を指定することができ

 背景：リニアグラジエント（右上に、黄色50％、緑）

背景：リニアグラジエント（右上、黄、緑の50％まで）

背景：リニアグラジエント（右上に、黄色50％、緑0）;
 / * 注：開始色は最初の50％に相当するカウント独自占める位置からの位置である、第2 0は50％で開始されます* /

前記複数の線形勾配を使用して（）

背景：直線勾配（45deg、RGBA（0、0、0、0）が50％、＃162e48 0）、
  線形勾配（135deg、赤40％、ブルー、透明0）、
  線形勾配（45deg、ブラック、透明）; 
/ * フロントの後ろに透明色を塗りつぶし* /

5.効果を確認するためのボタン、グッズ

< DIV クラス= "DIV4" > 
  < DIV クラス= "div4-1アクティブ" > OFF </ DIV > 
  < DIV クラス= "div4-2" > ON </ DIV > 
</ DIV >

.div4 { 
  幅：144px ; 
  高さ：30px ; 
  行の高さ：30px ; 
  背景：＃162e48。
  色：#FFF ; 
  テキスト整列：センター ; 
  マージン下：30px ; 
} 
.div4-1、
.div4-2 { 
  幅：86px ; 
  フロート：左 ; 
} 
.div4-1.active { 
  マージン右：-28px; 
  背景：リニアグラジエント（-135deg、透明な20ピクセル、＃1 F00 0） 。
} 
.div4-2.active { 
  マージン左：-28px。
  背景：リニアグラジエント（45deg、透明な20ピクセル、＃1 F00 0） 。
}