CSS3 放射状グラデーションが中心とサイズの形状を定義する方法の詳細な説明 (コード例)

この記事では、CSS3 放射状グラデーションが中心とサイズの形状を定義する方法 (コード例) について詳しく説明します。困っている友人は参考にしていただければ幸いです。

放射状グラデーション --radial-gradient() がサポートされているすべてのブラウザで正しく動作するようにし、将来のサポートに対応するいくつかの新機能を追加します。次のように記述できます:

.demo {
	/* 不支持浏览器的后备 */ 
	background: #000000;
	
	/* 旧的WebKit语法 */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));
	
	/* 新的WebKit语法 */ 
	background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* IE10 + */ 
	background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
	
	/* Opera (13?) */
	background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
        
    /* 标准写法*/
    background-image: radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);
}

標準的な記述を使用して、放射状グラデーションの構文を段階的に分析してみましょう:

.demo {  
    background-image: radial-gradient(center center, circle cover, black, blue, green, red, purple, white);  
}

グラデーションの中心を定義します

radial-gradient() 関数に渡される最初の引数 (はい、radial-gradient() は関数です。括弧が付いているのはそのためです) は、グラデーションが中心位置を完了するときに作成される楕円を定義します。上の例では、「center center」の値のペアを使用しました。

「放射状」という言葉は、「中心から半径に沿って外側に…」という意味です。したがって、最初のパラメータは、外向きのアクションが開始される場所を定義します。

基本的に、このパラメーターは、background-position プロパティに入力した任意の値を受け入れることができます。グラデーションの中心位置のデフォルトまたは初期値は、center center です。

形状とサイズの定義

関数の 2 番目のパラメーターは、グラデーションの形状とサイズを定義します。

2 番目のパラメータ の最初の部分は、円または楕円 (つまり、円または楕円) にすることができます。違いは基本的に、楕円は完全な円ではないということです。したがって、楕円の値はグラデーションを楕円にすることができますが、円の値はグラデーションが常に完全な円であることを意味します。

2 番目のパラメータ の 2 番目の部分 (サイズを定義) は、6 つの値 (キーワード) のいずれかをとります。

1、最も近い側 (最も近い端)

2、最も近いコーナー (最も近いコーナー)

3、最も遠い側 (最端)

4, farthest-corner (最遠の角)

5, 含む (含む)

6, カバー (カバー)

一見すると、これらの値を理解するのは少し難しいかもしれないので、理解するために例を使用して 1 つずつ分類してみましょう。基本的な黒から白へのグラデーションを使用して、各値が何をするのかを説明しましょう。コードは次のとおりです:

.demo {
  background-image: radial-gradient(50px 50px, circle closest-side, black, white);
}

他の値はすべて同じままですが、サイズの値 (現在は最も近い側に表示されています) を変更します。これにより、各値がオブジェクトの外観に与える影響を確認できます。勾配。

形状とサイズの値をわかりやすくするために、中心位置を 50px 50px に設定していることに注意してください。

最近接側

この値により、グラデーションのエッジがグラデーションの中心に最も近い要素の辺と交差します。

##closest-corner

最遠側

farthest-corner

contain

# ＃＃＃＃＃＃＃＃＃＃＃見覚えがあります？まあ、上で述べたように、この値は最近接側に相当するため、そのはずです。

cover

まとめ: この記事で紹介した内容は以上です。皆様の学習に少しでもお役に立てれば幸いです。

以上がCSS3 放射状グラデーションが中心とサイズの形状を定義する方法の詳細な説明 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。