HTML5 と CSS3 を使用して円を作成およびスタイルするにはどうすればよいですか?

HTML5 と CSS3 での円の描画

HTML5 と CSS3 には、円を直接描画するネイティブ サポートがありませんが、革新的な技術を使用したサークルの外観。

によるサークルの作成角の丸い

円をシミュレートするには、長方形の要素を作成し、それに丸い角を適用します。丸い角の半径は、作成する円の幅または高さの半分である必要があります。

たとえば、次のコードは、直径 50 ピクセルの赤い円を作成します。

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

<div>

円の中にテキストを追加する

円の中にテキストを追加するには、テキスト要素をサークルコンテナ内に絶対配置し、垂直方向と水平方向に中央揃えで配置します。

#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div>

以上がHTML5 と CSS3 を使用して円を作成およびスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。