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

この値により、グラデーションのエッジが最も近くなります。グラデーションの中心の要素が交わります。

#グラデーション全体の形状の一部が切り取られていることに注意してください。これは、要素の角に押し込まれ、そのエッジが要素の角と交差するためです。

最遠側

これは最初の値の逆であり、グラデーションのエッジが中心から最も遠い側になります。要素の側面が一致する:

# グラデーションは強制的に引き伸ばされるため、この例のグラデーションのサイズは他の 2 つの値とは異なることに注意してください。要素の最も遠い端に触れます。

farthest-corner

この値により、グラデーションがグラデーションの中心から最も遠い要素の角まで広がります:

これで、グラデーションがより多くの要素をカバーするようになりました。

contain

この値により、要素の境界線によってグラデーションが切り取られることなく、要素が完全に含まれるまでグラデーションが拡大されます。

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

cover

この値により、コンポーネントの領域全体をカバーするまで勾配が増幅されます:

##この値は最遠隅に相当するので、この値にも見覚えがあるでしょうか。

注: キーワードを使用してサイズを定義しても、プログレッシブ円のサイズを正確に定義することはできません。

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

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