幅と高さを 0 に設定し、境界線の幅を大きくし、境界線の半径を一致させると、CSS で円がどのように作成されるのでしょうか?

この CSS はどのようにして円を生成しますか?

まず CSS を詳しく見てみましょう:

div {<br> width: 0;<br> height: 0;<br> border: 180px ソリッドレッド;<br> border-radius: 180px;<br>}<br>

• 幅と高さは両方とも 0 に設定されます。これは、要素にコンテンツがないことを意味します。


• border は 180 ピクセルの赤一色に設定されます。これは、要素に幅 180 ピクセルの赤い境界線が設定されることを意味します。


• border-radius は 180 ピクセルに設定されます。これは、境界線の角は半径 180 ピクセルに丸められます。

ここで、これらのプロパティがどのように連携して円を作成するかを考えてみましょう。

幅と高さは実際にどこに適用されますか?

幅と高さのプロパティは、境界線ではなく要素のコンテンツに適用されます。この場合、要素にはコンテンツがないため、width プロパティと height プロパティは効果がありません。

border-radius はどこに適用されますか?

border-radius プロパティは要素の境界線に適用されます。境界線の角を指定した半径に丸めることができます。この場合、border-radius プロパティは 180 ピクセルに設定されています。これは、境界線の角が半径 180 ピクセルに丸められることを意味します。

これは何を意味しますかfor our border-radius/circle?

border プロパティと border-radius プロパティを組み合わせると、円を作成できます。 border プロパティは要素の周囲に長方形の境界線を作成し、border-radius プロパティは境界線の角を指定された半径に丸めます。この場合、border-radius プロパティは 180px に設定されています。これは、境界線の角が 180 ピクセルの半径に丸められることを意味します。これにより円が作成されます。

例の CSS ルールがどのように連携して円を作成するかを示す図は次のとおりです:

図では、要素 (小さな黒い点) の実際のコンテンツ は実際には存在しません。境界半径を適用しなかった場合は、緑色のボックスが表示されます。境界線の半径により青い円が表示されます。

その他のリソース

• W3C: CSS 背景と境界線モジュール レベル 3 (特に 5. 角丸)


• デモンストレーション

以上が幅と高さを 0 に設定し、境界線の幅を大きくし、境界線の半径を一致させると、CSS で円がどのように作成されるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。