ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSlinear-gradient とradial-gradient
これまでCSS3のプロパティをたくさん使ってきましたが、覚えにくいものが多くてすぐに忘れてしまったので、覚えやすくするためにブログを書きたいと思います。
それでは、まず line-gradient について説明しましょう:
背景画像: 線形グラデーション(方向, カラーステップ 1, カラーステップ 2, ....)
例(高さ:100px を想定)
背景:線形グラデーション(下へ、赤 0%、黄色 50%、緑 100%);背景と同じ:linear-gradient(180deg, 赤 0px, 黄色 50px, 緑 100px);
repeatng-linear-gradient():背景:repeatng-linear-gradient(red 0,red 10%, yellow 10%, yellow 20%);
これらのパラメータは、赤から赤までは 0% ~ 10%、黄色から黄色までは 10% ~ 20% を表し、この効果を繰り返して要素サイズ全体をカバーします。
radial-gradient()
この関数のパラメータは、形状、サイズ、円の中心の位置、色、色の位置の 5 つの部分で構成されます。
この効果は、中心位置が (0,0) に位置し、グラデーション半径が要素の幅に等しいということです。
そして、repeat-radial-gradient() は、repeat-linear-gradient() と同じです。
最後に、linear-gradient と radient-gradient の互換性があります (詳細については、CanIuse Web サイトを参照してください)
以上がCSSlinear-gradient とradial-gradientの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。