CSS3 放射状グラデーション (radial-gradient)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

前回の記事ではCSS3の線形グラデーション(linear-gradient)を紹介しましたが、今回はradial-gradient(放射状グラデーション)と繰り返しグラデーション(linearrepeat、radialrepeat)を紹介します。以前は、グラデーション効果、影、角丸効果はすべて画像として作成されていましたが、CSS3 では CSS コードを記述することで直接実装できるようになりました。

CSS3 放射状グラデーションと線形グラデーションは非常に似ています。まず構文を見てみましょう:

-moz-radial-gradient([ || ,] [,? ;]*);

線形グラデーションで既に表示されている開始位置、方向、色に加えて、放射状グラデーションでは、グラデーションの形状 (円または楕円) とサイズ (最も近い) を指定できます。側面、最も近いコーナー、最も遠い側、最も遠いコーナー、包含またはカバー）。カラーストップ: 線形グラデーションの場合と同様に、グラデーションラインに沿ってグラデーションの開始色と終了色を定義する必要があります。 CSS3 放射状グラデーションの具体的な使用法をよりよく理解するために、主にさまざまな例を通じて CSS3 放射状グラデーションの具体的な使用法を比較します。最もよく使用される UI フロントエンドフレームワークを共有します。

例 1:

.Code

背景: -moz-radial-gradient(#ace, #f96, #1E90FF);

背景: -webkit-radial-gradient( #ace, #f96, #1E90FF);

上の 2 つの例のコードから、同じアイデアで始まり、終わることがわかりました。しかし、2 番目の例では、なぜこれほど大きな違いがあるのでしょうか?実際、放射状グラデーションの開始色と終了色は同じですが、位置が設定されていない場合、デフォルトの色は等間隔になります。これは前の線形グラデーションと同じですが、グラデーションの位置が設定されている場合はそれに続きます。グラデーションの位置。これが例 1 との違いです。円の開始色と終了色は同じですが、例 1 ではデフォルトの色が等間隔のグラデーションですが、例 2 では各色が特定の位置を持っています。。最高の UI フロントエンドフレームワークの 1 つを共有してください。

例 3:

.Code

背景: -moz-radial-gradient(bottom left, Circle, #ace, #f96, #1E90FF);

例 4:

.コード

背景: - moz-radial-gradient(左下, 楕円, #ace, #f96, #1E90FF);

背景: -webkit-radial-gradient(左下, 楕円, #f96, #1E90FF);

例 5:

.Code

背景: -moz-radial-gradient(楕円の最も近い側, #ace, #f96 10%, #1E90FF 50%, #f96);
背景: -webkit-radial-gradient(楕円の最も近い側, # ace、#f96 10%、#1E90FF 50%、#f96);

効果は次のとおりです:

例 6:

.code

背景: -moz -radial-gradient(楕円の一番遠いコーナー, #ace, #f96 10%, #1E90FF 50%, #f96);
背景: -webkit-radial-gradient(楕円の一番遠いコーナー, #ace, # f96 10% , #1E90FF 50%, #f96);

例 5 と例 6 のコードから、例 5 では次のことが明確にわかります。私は最も近い側を使用しました。例 6 では、最も遠いコーナーを適用しました。このようにして、放射状グラデーションではサイズ (Size) も設定できることがわかります。サイズのさまざまなオプション (最も近い側、最も近いコーナー、最も遠い側、最も遠いコーナー、包含またはカバー) は、円または楕円のサイズの点を定義するために使用されます。例: 楕円の手前側と奥側の角以下の 2 つの楕円はサイズが異なります。例 5 は始点 (中心) から近端までの距離で設定され、例 6 は始点 (中心) から遠隅までの距離で設定されています。最高の UI フロントエンドフレームワークの 1 つを共有してください。

背景: -webkit-radial-gradient(circle Closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

効果は次のとおりです。

例 8:

例 7 と 8 は主に円の手前側 VS 奥側を示しています。例 7 の円のグラデーションサイズは次のように決定されます。始点（中心）から手前側までの距離、例の8の円は始点から奥側までの距離で決まります。

例 9:

.Code

背景: -moz-radial-gradient(#ace, #f96, #1E90FF);

背景: -webkit-radial-gradient( #ace, #f96、#1E90FF);

例 10:

。背景: -moz-radial-gradient(contain, # ace, # f96, #1E90FF);

背景: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF); 効果は次のとおりです。

/* Firefox 3.6+ */

背景: -moz- radius-gradient(circle, #ace, #f96);

/* Safari 4-5、Chrome 1-9 */

/* サイズを指定できません */

背景: -webkit -gradient (radial, center center, 0, center center, 460, from(#ace), to(#f96));

/* Safari 5.1 以降、Chrome 10 以降 */

背景: -webkit-radial- gradient(circle, #ace, #f96);

以下の例では、Positioned、Sized を使用しています。コードと効果を参照してください:

。

/* Firefox 3.6+ */
/* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
背景: -moz-radial-gradient (80% 20%, 最近接コーナー, #ace, #f96);
/* Safari 4-5、Chrome 1-9 */
背景: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96));
/* Safari 5.1 以降、Chrome 10 以降 */
背景: -webkit-radial-gradient(80% 20%、最も近い-corner, #ace, #f96);

効果は次のとおりです:

これまで、CSS3 の 2 つのグラデーションメソッドを紹介しました。もう少し時間をかけて、CSS3 繰り返しグラデーションの適用を見てみましょう。

グラデーションを繰り返したい場合は、-moz-repeat-linear-gradient (繰り返しの線形グラデーション) と -moz-repeat-radial-gradient (繰り返しの放射状グラデーション) を使用できます。以下の例では、各インスタンスに 2 つの開始色と終了色が指定され、無限に繰り返されます。最高の UI フロントエンドフレームワークの 1 つを共有してください。

コード

背景: -moz-Reperation-Radial-Gradient (#ACE, #ACE 5PX,#F96 5px,#F96 10px); #f96 10px);

.Code

gradient ＆lt; li＆gt;＆lt;

ul {
オーバーフロー: 非表示;
margin-top: 20px;
}
li{
幅: 150px;
高さ: 80ピクセル;
margin-bottom: 10px;
フロート: 左;
margin-right: 5px;
背景: #ace;
/*サイズを制御します*/
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
背景サイズ: 20ピクセル 20ピクセル;
}
li.gradient1 {
background-image: -webkit-gradient(
linear,
0 100%, 100% 0,
カラーストップ(.25, rgba(255, 255 , 255, .2)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, . 2))、
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, 透明),
to(透明)
);
background-image: -moz-linear-gradient(
45deg,
rgba(255, 255, 255, .2) 25%,
rgba（255、255、255、.2）75％、
透明75％、
透明
li.gradient2 {
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop (.25, rgba(255, 255, 255, .2)) 、color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(. 75, rgba(255, 255, 255, .2)), color-stop(.75, 透明),
to(透明));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
透明 50%, rgba(255, 255, 255, .2) ) 50%, rgba(255, 255, 255, .2) 75%,
透明 75%, 透明);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
透明 50%, rgba(255, 255, 255, .2) ) 50%, rgba(255, 255, 255, .2) 75%,
透明 75%, 透明);
背景画像: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,
透明 50%, rgba(255, 255, 255, .2) 50% , rgba(255, 255, 255, .2) 75%,
透明 75%, 透明);
}
li.gradient3 {
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)) , color-stop(.5, 透明), to(透明));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
li.gradient4 {
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)) , color-stop(.5, 透明), to(透明));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}