CSSでグラデーションカラーを設定する方法-CSSチュートリアル-php.cn

CSSでグラデーションカラーを設定する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:08:02

オリジナル

66294 人が閲覧しました

方法: 1. 線形グラデーションを設定するには、linear-gradient を使用します。構文 "linear-gradient (angle, color, color)"; 2. 放射状グラデーションを設定するには、radial-gradient を使用します。構文 "放射状グラデーション（位置）、色、色）」。

CSSでグラデーションカラーを設定する方法

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 グラデーションを使用すると、2 つ以上の指定した色間の滑らかな遷移を表示できます。

CSS3 は 2 種類のグラデーションを定義します:

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

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

css 設定の線形グラデーションの例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSでグラデーションカラーを設定する方法