HTML5 と CSS3 を使用して円を作成およびスタイルするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-23 12:25:16

オリジナル

545 人が閲覧しました

How Can I Create and Style Circles Using HTML5 and 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 サイトの他の関連記事を参照してください。