CSS3で色のグラデーション効果を実現する方法

CSS3 でカラー グラデーション効果を実現する方法: [linear-gradient( yellow, green)] のように、linear-gradient 関数とradial-gradient 関数を使用して、それぞれ線形グラデーション効果と放射状グラデーション効果を実現できます。 。

css3 グラデーションには、css3 線形グラデーションと css3 放射状グラデーションの 2 種類があります。

(学習ビデオ共有:css ビデオ チュートリアル)

1. 線形グラデーション カラー グラデーション

関数:

linear-gradient () 関数は、2 色以上の線形グラデーションを表す画像を作成するために使用されます。

構文:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

値:

• direction 角度値を使用して、グラデーションの方向 (または角度) を指定します。

• color-stop1、color-stop2、... グラデーションの開始色と終了色を指定するために使用されます。

例:

      
  
线性渐变 - 从上到下
 
  

2. 放射状グラデーション

関数;

radial-gradient() 関数は放射状グラデーションを使用します。画像"。

放射状のグラデーションは中心点によって定義されます。

放射状のグラデーションを作成するには、2 つのストップ カラーを設定する必要があります。

構文:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

値:

1.shape 円のタイプを決定します

• ellipse (デフォルト): 楕円形の放射状グラデーションを指定します。

• circle: 円の放射状のグラデーションを指定します

• farthest-corner (デフォルト): 円の中心から円の中心から最も遠い角までの放射状グラデーションの半径の長さを指定します

• nearest-side: 放射状グラデーションを指定します。半径の長さは、円の中心から中心に最も近い側までです。

• closest-corner: 放射状グラデーションの半径の長さを、円の中心から指定します。円の中心から中心に最も近い角まで

• farthest-side: 円の中心から中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。円

• center (デフォルト): 放射状グラデーション円の中心の座標値を設定します。

• top: 上部を放射状グラデーション円の中心の縦座標値に設定します。

• bottom: 底部を放射状グラデーション円の中心の縦座標値に設定します。

      
  
径向渐变
 
  

CSS チュートリアル

以上がCSS3で色のグラデーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。