ホームページ > 記事 > ウェブフロントエンド > CSS3で色のグラデーション効果を実現する方法

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

王林オリジナル: 2020-11-16 14:36:373526ブラウズ

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、... グラデーションの開始色と終了色を指定するために使用されます。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

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

関数;

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

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

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

構文:

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

値:

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

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

##2、サイズグラデーションのサイズを定義します。可能な値:

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

3. 位置はグラデーションの位置を定義します。可能な値:

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

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

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

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

関連記事