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 の円形放射状グラデーションを定義します。

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

##:

グラデーションの中心を決定します。これは省略可能ですが、このパラメータを省略した場合、デフォルトは中心になります。

:

2 つの値を設定できます: 円 (円) または楕円 (楕円) で、グラデーションの終了形状を決定します。円形または楕円形は省略できます。

:

グラデーションの終了形状のサイズを決定します。省略した場合、デフォルトは「最も遠いコーナー」になります。キーワードを通じて明示的に指定できます。キーワードを定義する目的では、グラデーション ボックスのエッジを有限の線分としてではなく、両方向に無限に伸びるものとして考えてください。

端の形状が楕円形の場合、その軸は水平軸と垂直軸と一致します。

円と楕円のグラデーションとして定義される場合、 パラメータ値として次のキーワードを受け入れます。 #closest -side:端のシェイプは、グラデーションの中心に最も近いサイド グラデーション ボックスに正確に収まるようにサイズ設定されます。形状が楕円の場合、各次元で最も近い辺と正確に交差します。 farthest-side:

最終的な形状のサイズが最も遠い側に基づくことを除いて、最も近い側と同じです。

closest-corner:

端の形状は、それが交差するコーナーのグラデーション ボックスがグラデーションの中心に最も近くなるようにサイズ設定されます。形状が楕円の場合、端の形状は最も近い辺が指定された場合と同じアスペクト比で与えられます。

farthest-corner:

最終的な形状のサイズが最も遠いコーナーに基づくことを除いて、最も近いコーナーと同じです。形状が楕円の場合、端の形状のアスペクト比は、最も遠い辺が指定された場合と同じになります。

##注

:
1. が「circle」として指定されている場合、または省略されている場合は、 は明示的に指定できます:

: 円の半径は明示的に指定され、負の値は無効です。 パーセンテージはここでは使用できません。パーセンテージは、円形のグラデーションではなく、楕円形のグラデーションのサイズを指定するためにのみ使用できます。

2. を「ellipse」として指定するか省略した場合、 は次のように明示的に指定できます。 ; {2}:

楕円のサイズを明示的に指定します。最初の値は水平半径を表し、2 番目の値は垂直半径を表します。パーセンテージ値は、グラデーション ボックスの対応する寸法に相対的です。負の値は無効です。

放射状グラデーションの例

例 1: 基本的な放射状グラデーションを指定するさまざまな方法

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);

示例三：设置为closest-side 的渐变

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);

以上がCSSのradial-gradient()とは何ですか? Radial-gradient() の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。