CSSlinear-gradient とradial-gradient

Susan Sarandon
Susan Sarandonオリジナル
2024-12-31 17:03:10968ブラウズ

これまでCSS3のプロパティをたくさん使ってきましたが、覚えにくいものが多くてすぐに忘れてしまったので、覚えやすくするためにブログを書きたいと思います。
それでは、まず line-gradient について説明しましょう:
背景画像: 線形グラデーション(方向, カラーステップ 1, カラーステップ 2, ....)

  • 方向: 角度を使用してグラデーションの方向を示します。値は角度またはそのいずれか (左、右、上、下) になります。デフォルトは下まで(180度)です。
  • color-step: グラデーションの開始色。次の 2 つの部分で構成されます。 color: 有効な CSS カラー値。 長さまたはパーセンテージ: 開始位置。負の値は許可されません

例(高さ:100px を想定)
背景:線形グラデーション(下へ、赤 0%、黄色 50%、緑 100%);背景と同じ:linear-gradient(180deg, 赤 0px, 黄色 50px, 緑 100px);

CSSlinear-gradient and radial-gradient

repeatng-linear-gradient():背景:repeatng-linear-gradient(red 0,red 10%, yellow 10%, yellow 20%);

CSSlinear-gradient and radial-gradient

これらのパラメータは、赤から赤までは 0% ~ 10%、黄色から黄色までは 10% ~ 20% を表し、この効果を繰り返して要素サイズ全体をカバーします。

radial-gradient()
この関数のパラメータは、形状、サイズ、円の中心の位置、色、色の位置の 5 つの部分で構成されます。

  • 形状: 楕円(デフォルト)または円;
  • サイズ: 放射状グラデーションの半径の増加方向として呼びたいと思います。可能な値は、最遠隅(デフォルト)、最も近いコーナー、最も遠い側、最も近い側です。
  • 位置: 放射状グラデーションの中心位置、(50%、50%) がデフォルトです。
  • 色と色の位置: 線形グラデーションと同じ;

CSSlinear-gradient and radial-gradient

CSSlinear-gradient and radial-gradient

この効果は、中心位置が (0,0) に位置し、グラデーション半径が要素の幅に等しいということです。

そして、repeat-radial-gradient() は、repeat-linear-gradient() と同じです。

最後に、linear-gradient と radient-gradient の互換性があります (詳細については、CanIuse Web サイトを参照してください)

CSSlinear-gradient and radial-gradient

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。