linear-gradient（）背景色のグラデーション

css構文

background: linear-gradient(direction,color-stop1,color-stop2,...);
direction：用角度值指定渐变的方向（或角度）；
color-stop1,color-stop2,...：用于指定渐变的起止颜色
ps：至少需要两种颜色
1   background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
2   background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ 
3   background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
4   background: linear-gradient(red,yellow,blue); /* 标准语法 */

互換性

インスタンス

1.背景：linear-gradient（to left、＃d3959b、＃bfe6ba）;
左にグラデーションを右から左に設定します。270度に相当します！[2。background

：linear-gradient（to right、＃d3959b、＃bfe6ba） ;
右に90度

3に相当する左から右へのグラデーションを設定します。背景：linear-gradient（to top、＃d3959b、＃bfe6ba）;
上に0度

4に相当する下から上へのグラデーションを設定します。背景：線形-gradient（to bottom、＃d3959b、＃bfe6ba）;

5. background：linear-gradient（to top right、＃d3959b、＃bfe6ba）;
to right top = to top right：左下隅から右上隅へ、対角線

6.背景：linear-gradient（45deg、＃d3959b、＃bfe6ba）;右上と
は少し異なります（背景が正方形の場合は違いはありません）

7。background：linear-gradient（45deg、＃ d3959b 20％、＃bfe6ba）;
開始色の位置をパーセンテージで指定します。デフォルト値は0％です

。8。背景：linear-gradient（to right、＃feac5e、＃c779d0、＃4bc0c8）;

9.背景：linear-gradient（45deg、＃feac5e、＃c779d0、＃4bc0c8）;

10.背景：linear-gradient（45deg、rgba（254,172,94,0.5）、rgba（199,121,208,0.5）、rgba（75,192,200、 0.5））;
rgbaは0.5の透明度を使用します