CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法

背景: linear-gradient(direction,color-stop1,color-stop2,...);

• direction : 角度値を使用してグラデーションの方向 (または角度) を指定します。
• color-stop1,color-stop2,... : グラデーションの開始色と終了色を指定するために使用されます。

注意: 少なくとも 2 色が必要です。

最初のもの

背景: 線形グラデーション(左へ、#d3959b、#bfe6ba);

to left は右からto leftグラデーションを設定します。これは270degに相当します。

2番目

背景: 線形グラデーション(右へ、#d3959b、#bfe6ba);

to right 、左から右へのグラデーション、つまり90degに設定します。

3番目

背景: linear-gradient(上へ、#d3959b、#bfe6ba);

to top下から上へのグラデーションを設定します。これは0degに相当します。

4番目

背景: linear-gradient(下へ、#d3959b、#bfe6ba); 

5番目

背景: 線形グラデーション(右上、#d3959b、#bfe6ba);

右上へto right top = to top right 、対角の角度

第六

背景: 線形グラデーション(45度,#d3959b,#bfe6ba);

「 to top rightと「右上へ」には若干の違いがあります（背景が正方形の場合は違いはありません）。

7番目

背景: 線形グラデーション(45度,#d3959b 20%,#bfe6ba);

開始色の位置をパーセンテージで指定します。デフォルト値は0%です。

8番目

背景: linear-gradient(右へ、#feac5e、#c779d0、#4bc0c8); 

第九

背景: 線形グラデーション(45度,#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が使用されます。

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient()) に関するこの記事はこれで終わりです。CSS コンテナ背景色グラデーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。