CSSのradial-gradient()とは何ですか? Radial-gradient() の使用

この記事では、CSS の Radial-gradient() とは何なのかを紹介します。 Radial-gradient() の使用。困っている友人は参考にしていただければ幸いです。

CSS では、グラデーションを設定することで、2 つ以上の指定した色の間で滑らかな遷移を実現できます。また、グラデーションはブラウザによって生成されるため、グラデーション効果のある要素は拡大すると見栄えが良くなります。 [関連ビデオの推奨: css3 チュートリアル ]

CSS では 2 種類のグラデーションを定義できます:

1. 下/上/左/右/への線形グラデーション対角線方向

2. 放射状グラデーション (放射状グラデーション) - 中心によって定義

前の記事 [CSS での線形] で説明しました。gradient() は何ができるでしょうか?線形勾配のlinear-gradient()属性の使用方法は、[linear-gradient()の詳細説明]で紹介されているため、ここでは紹介しません。 radial gradient--radial-gradient() 属性の使用法を詳しく見てみましょう。

放射状グラデーションでは、線形グラデーションのようにカラーがグラデーション ボックスの一方の側からもう一方の側にスムーズにフェードするのではなく、単一の点から円形または楕円形でスムーズに外側に現れます。拡張されました。

radial-gradient() は、グラデーションの中心のサイズと形状 (0% の楕円となる場所) および終端の形状 (100% の楕円) を示すことにより、放射状のグラデーションを指定します。カラーストップは、linear-gradient() と同様にリストとして指定されます。グラデーションの中心から開始して、終端形状に向かって (場合によってはそれを超えて)、均一にスケールされた同心円状の楕円が描画され、指定されたカラーストップに従って色付けされます。

radial-gradient() 属性の基本構文

放射状グラデーションの構文は次のとおりです:

radial-gradient(  [ <ending-shape> || <size> ] [ at <position> ] ,<color-stop-list> )

例:

background: radial-gradient(5em circle at top left, yellow, blue)

は、左上隅を中心とする幅 5em の円形放射状グラデーションを定義します。

#パラメータ分析は次のとおりです:

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

radial-gradient(circle, yellow, green);

radial-gradient(red, yellow, green);

radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

radial-gradient(closest-side at 20px 30px, red, yellow, green);
radial-gradient(20px 30px at 20px 30px, red, yellow, green);

radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
radial-gradient(20px 20px at 20px 30px, red, yellow, green);