HTML と CSS での円の描画についての私の理解を簡単に話しましょう。 _html/css_WEB-ITnose

最近、CSS で編集するときに、角の丸い四角形を要求したり、円を直接描画したりする必要がある境界線画像の例をたくさん見つけました。円の描画についての私の見解を共有しましょう。

この共有では、理解を深めるためにいくつかの例を示すことに重点を置きます。

円を描くときは「border-radius:」を使用する必要があることは誰もが理解しています。円を描くたびに、最初に幅と高さを設定する必要があります。

次に、次のように理解できます。

私たちの円は長方形 (正方形) で切り取られ、境界線の半径は切り抜きたいサイズです。

よりよく理解するためにいくつかの写真を見せてください。

まず、次のように幅 100px、高さ 100px の正方形を設定し、背景を赤に設定します

次に、

border-radius: 50px 0 0 0; を追加します。効果は次のとおりです:

Border-radius: 50px 50px 0 0; 効果は次のとおりです:

Border-radius: 50px 50px 50px 0; 効果は次のとおりです:

border- radius: 50px 50px 50px 50px; 効果は以下の通りです:

上記のコードを段階的に追加すると、次のように画像が変化します:

border-radius: 0 0 0 0;

4 つの値のうち、最初の値は長方形の左上隅の円の半径 (円の 1/4) です。 /4 の円); 4 of 4);

四 長方形の 4 番目の値は、長方形の左下隅の円の半径 (円の 1/4) であり、半径を変更することで完成します。 )

上記は、border-radius についての私の理解です。何か間違っている場合は、コメントしてください。