HTML と CSS を使用して円形要素を作成するには?

HTML と CSS を使用した円形要素の作成

HTML5 および CSS3 で円を描画するには、これらのテクノロジが円形状のネイティブ サポートを欠いているため、回避策が必要です。ただし、角の丸い長方形を作成することで円をシミュレートできます。

境界線の半径: 角を丸くするための鍵

角の丸いものを作成するには、 CSS の border-radius プロパティを利用します。その値を目的の円の 幅と高さの半分 に設定すると、半円形を実現できます。

たとえば、直径 50 ピクセルの円には境界線が必要です。半径 25 ピクセル:

#circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
}

テキストの追加Inside

シミュレートされた円内にテキストを配置するには、テキストを <div> で囲みます。要素:

<div>

以上がHTML と CSS を使用して円形要素を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。