css3での2種類のグラデーションの導入例

この記事では、CSS3 の 2 種類のグラデーションの例を紹介します。必要な方は参考にしてください。

css3
ps: CSS はますます言語らしくなってきています。CSS にはすでに変数が含まれているのをドキュメントで見ました。実験的な機能です。

グラデーション

グラデーションは、線形グラデーションと放射状グラデーションの2種類に分けられます

線形グラデーション

線形グラデーションには、上、下、左、右の2つのグラデーションモードがあります。

linear-gradient()関数

これはCSSの関数です。線形グラデーションは、軸であるグラデーション ラインで構成されます。その上の各点には 2 つ以上の色があります。軸上の各点は独立した色を持ちます。滑らかなグラデーションを作成するために、この関数は一連のシェーディング ラインも作成します。各シェーディング ラインの色は、それと垂直に交差するグラデーション ライン上のカラー ポイントにも依存します。

// 渐变轴45度，重蓝色到红色linear-gradient(45deg, blue, red);

// 从右下到左上，蓝色渐变到红色linear-gradient(to left top, blue, red);

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red)

ps透明度はrgba

放射状グラデーションの最後のパラメータです

放射状グラデーションは、その中心点、エッジ形状、輪郭とその位置、およびカラー値の終点の構成で構成されます。
放射状グラデーションは連続的に楕円で構成されます

最初のパラメータ

最初のパラメータは通常省略できます、

closest-side

closest-corner

closest-side

一番遠い隅

パーセンテージで円を描く

分けて書く

パーセント記号

おすすめ記事:

CSS 3 つのアニメーション プロパティ:transform プロパティ

の概要CSS3 アニメーション プロパティ: アニメーション プロパティの概要

以上がcss3での2種類のグラデーションの導入例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。