CSS の基礎学習 -- 26 のグラデーション (グラデーション)

CSS3 グラデーションを使用すると、2 つ以上の指定した色間の滑らかな遷移を表示できます。以前は、これらの効果を実現するには画像を使用する必要がありました。ただし、CSS3 グラデーションを使用すると、ダウンロード時間と帯域幅の使用量を削減できます。また、グラデーションはブラウザによって生成されるため、グラデーションのある要素は拡大すると見栄えがよくなります。

CSS3 では、次の 2 種類のグラデーションが定義されています。

線形グラデーション - 下/上/左/右/斜め方向
放射状グラデーション - 中心によって定義

1. 線形勾配

線形グラデーションを作成するには、少なくとも 2 つのカラーノードを定義する必要があります。カラーノードは、スムーズな遷移を実現したいカラーです。同時に、開始点と方向（または角度）を設定することもできます。

文法：

背景画像: 線形グラデーション(方向, カラーストップ 1, カラーストップ 2, ...);

1.1、線形グラデーション - 上から下へ (デフォルト)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-渐变从上到下</title> 
<style>
#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>

<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

1.2、線形グラデーション - 左から右へ

左から始まる直線的なグラデーション。開始点が赤で、ゆっくりと黄色に移行する例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-渐变从左到右</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>

</body>
</html>

1.3. 線形グラデーション - 対角線

水平方向と垂直方向の開始位置を指定することで、斜めのグラデーションを作成できます。

以下の例は、左上隅から (右下隅まで) 始まる線形グラデーションを示しています。開始点は赤で、ゆっくりと黄色に変わります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-渐变对角</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>

<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>

</body>
</html>

2. 複数のカラーノードを使用する

#grad {
  background-image: linear-gradient(red, yellow, green);
}

複数のカラーノードを含む上から下の線形グラデーション:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-渐变多颜色</title> 
<style>
#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
	background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 200px;
	background-color: red; /* 浏览器不支持的时候显示 */
	background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>3 个颜色结点（均匀分布）</h3>
<div id="grad1"></div>

<h3>7 个颜色结点（均匀分布）</h3>
<div id="grad2"></div>

<h3>3 个颜色结点（不均匀分布）</h3>
<div id="grad3"></div>

<p><strong>注意：</strong> 当指定百分比时，颜色是不均匀分布。</p>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>

</body>
</html>

3. 透明度を使用する

CSS3 グラデーションは透明度もサポートしており、これを使用してフェード効果を作成できます。透明度を追加するには、rgba() 関数を使用してカラーノードを定義します。rgba() 関数の最後のパラメータは 0 から 1 までの値で、色の透明度を定義します。0 は完全に透明、1 は完全に不透明を意味します。

以下の例は、左から始まる線形グラデーションを示しています。開始点は完全に透明で、ゆっくりと完全に不透明な赤に移行します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-渐变透明度</title> 
<style>
#grad1 {
	height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>

</body>
</html>

繰り返されるグラデーション:

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

等。。