如何使用 HTML5 和 CSS3 建立圓圈並設計圓圈樣式？-css教學-PHP中文網

如何使用 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中文網其他相關文章！