CSSで色のグラデーションを設定する方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2021-04-08 19:57:51

オリジナル

3284 人が閲覧しました

CSS でカラーグラデーションを設定する方法: 1. CSS3 の「線形グラデーション」属性を使用して、線形カラーグラデーションを実現します。2. CSS3 の「放射状グラデーション」属性を使用して、放射状カラーグラデーションを実現します。

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

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、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で色のグラデーションを設定する方法