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、... グラデーションの開始色と終了色を指定するために使用されます。
例:
php中文网 线性渐变 - 从上到下
2. 放射状グラデーション
関数;
radial-gradient() 関数は放射状グラデーションを使用します。画像"。
放射状のグラデーションは中心点によって定義されます。
放射状のグラデーションを作成するには、2 つのストップ カラーを設定する必要があります。
構文:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
値:
1.shape 円のタイプを決定します
ellipse (デフォルト): 楕円形の放射状グラデーションを指定します。
circle: 円の放射状のグラデーションを指定します
php中文网 径向渐变
以上がCSS3で色のグラデーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。