css3のグラデーション属性とは何ですか

グラデーション属性には次のものが含まれます: 1. 線形グラデーション "linear-gradient()"、構文は "linear-gradient(angle, color, color)"; 2. 放射状グラデーション "radial-gradient()"、構文は「radial-gradient(position, color, color)」です。

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

グラデーションを使用すると、要素の背景をよりスピリチュアルで生き生きとしたものにすることができます。背景画像を使用してグラデーション効果を表示することもできますが、柔軟性が十分ではありません。色を変更したい場合は、画像エディターを使用する必要があります。グラデーションの場合は、コード内で直接色を変更できます。 CSS3 は、線形グラデーション (linear-gradient) と放射状グラデーション (radial-0gradien) という 2 つのグラデーション メソッドを提供します。

1. 線形グラデーション (linear-gradient)

線形グラデーションは、特定の方向に沿った色のグラデーションです。斜めの線。

線形グラデーションの構文:

background: linear-gradient(direction, color1, color2 [stop], color3...);

1. direaction: 線形グラデーションの方向を示します。表現方法としては以下の3つがあります。

(1) グラデーション方向

• 左へ：右から左へのグラデーションを設定します。
• tobottom: 上から下へのグラデーションを設定します。これはデフォルト値です。
• to right: 左から右へのグラデーションを設定します。
• to top: 下から上へのグラデーションを設定します。

左上、左下、右上、右下の 4 つの斜め方向にすることもできます。

(2) 方向開始点

• top: 上から下へのグラデーションを設定します。これはデフォルト値です。
• bottom: 下から上へのグラデーションを設定します。
• left: 左から右へのグラデーションを設定します。
• right: 右から左へのグラデーションを設定します。

左上、左下、右上、右下の斜め4方向でも構いません。

(3) 角度（角度）

角度は数値単位で表され、単位はdegです。すべての色は中心から始まり、0 度は上への方向、時計回りが正、反時計回りが負です。

#0deg は上と同等です
• 90deg は右と同等です
• 180 度は下と同等です、これはデフォルト値です
• 270deg または - 90deg は left

と同等です。同様に、斜め方向を表すには 45deg、135deg、225deg、および 315deg がありますが、角度を使用して方向を表すことは、水平方向と垂直方向を指定し、必要に応じて角度を調整して目的の効果を得ることができます。

2. color- *: グラデーションの遷移色を表します。通常、最初の色はグラデーションの開始色を表し、最後の色はグラデーションの終了色を表し、中央は中間色を表します。トランジションカラー。

3. 停止: 色の後に停止を追加できます。停止はパーセント値またはピクセル値で、次のように特定の色が停止位置に固定されることを示します:

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);
//渐变起始颜色是蓝色，当过度到20%时为绿色，也就是说在20%处恰好是绿色，然后继续渐变过度到黄色，到50%处恰好是黄色，后面同个道理，直到结束颜色红色，正好处于100%处。

2. 繰り返し線形グラデーション (繰り返し線形グラデーション)

線形グラデーションといえば、繰り返し線形グラデーションについて言及する必要があります。以下に示すようなストライプ効果を生成したい場合があります。最も便利な方法は、直線的なグラデーションを繰り返すことです。

文法コード:

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

上の赤色は 0 から始まり、10% に達してもまだ赤色であるため、赤色のストライプが形成されます。 10% 後に赤に変わります。 黄色は 20% まで黄色のままであるため、この時点で黄色のストライプが形成されます。その後、レンダリング中に 20% の赤と黄色のストライプがグラデーションを繰り返し、赤と黄色のストライプが交互になる効果が得られます。

方向を追加することもできます

background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

3. Radial-gradient

放射状グラデーションは次から始まります。中心点を指定し、すべての側面に沿ってグラデーション効果を作成します。これは、中心点、エッジ形状の輪郭と位置、およびカラー値の終点 (カラー ストップ) によって定義されます。

グラデーションに複数の色を設定すると、100% の領域が均等に分割されてグラデーションになります。もちろん、パーセンテージに加えて、特定のピクセルを使用してこのサイズを設定することもできます。ピクセル設定のサイズは、グラデーション円の中心から外側に伸びる距離を指します。

放射状グラデーション構文:

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

さまざまな属性の意味は次のとおりです:

// 圆心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> | 
<percentage> | top | center | bottom ]?  //默认处于中心点
// 渐变形状
<shape> = circle | ellipse  //默认是ellipse
// 渐变大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 渐变颜色及颜色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?

上記については詳しく説明する必要があります

定義するときグラデーション グラデーションの形状を直接定義できますが、この方法に加えて、サイズの特定の値を渡すことによってグラデーションの形状を決定することもできます。具体的な手順は次のとおりです:

1. size パラメーターを渡すとき size または 2 つの同一の size が値の場合、グラデーションの形状が円であることを意味します。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2. 異なるサイズの 2 つのサイズ パラメーターが渡された場合、グラデーションの形状が楕円であることを意味します。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

四、重复径向渐变（repeating-radial-gradient）

上面再说线性渐变时有说到线性渐变具有重复线性渐变，为径向渐变同样具有重复径向渐变，先看一个简单例子。

background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,
#ff0 10%,#ff0 20%);

重复径向渐变总体上与重复线性渐变差不多，只是重复线性渐变是一个方向上的重复渐变，不论是水平垂直还是对角线，如下图，左边为0%，右边为100%。

然而重复径向则是以圆心为中心点，以放射性方式渐变，中心点为0%，圆边界为100%。

关于上面重复径向渐变是如何生成条纹相间的就 不多加述说，原理和重复线性渐变相同。

下面给出一个重复径向渐变的实用例子，使用重复径向渐变生成一个唱片的效果 。

HTML：

<p class=&#39;record-container&#39;>
     <p class=&#39;record&#39;></p>
</p>

CSS：

.record-container {
     display: inline-block;
     overflow: hidden;
     width: 400px;
     height: 300px;
     border-radius: 10px;
     box-shadow: 0 6px #99907e;
     background: #b5ac9a;
}
        
.record {
     position: relative;
     margin: 19px auto;
     width: 262px;
     height: 262px;
     border-radius: 50%;
     background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) 
no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) 
no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,
 #2a2928 6px);
     background-size: 50% 100%, 100% 50%, 100% 100%;
}    
.record:after {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -35px;
     border: solid 1px #d9a388;
     width: 68px;
     height: 68px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
     background: #b5ac9a;
     content: '';
}

推荐学习：css视频教程

以上がcss3のグラデーション属性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。