如何在 HTML5 和 CSS3 中建立圓形元素？

使用 CSS3 在 HTML5 中建立圓形元素

使用標準元素直接在 HTML5 中繪製圓形是不可能的。但是，我們可以使用 CSS 樣式技術來建立近似值。

圓角近似

一種方法是建立圓角的長方形。將 border-radius 屬性設定為所需圓的高度或寬度的一半時，會建立平滑的曲線。

HTML 和 CSS 程式碼：

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

此程式碼建立一個帶有圓角的紅色矩形，視覺上近似於 50像素的圓

在內部添加文字（可選）

要將文字放置在近似圓內，請將內容新增至 HTML 標籤內的 DIV 元素。

<div><p>透過使用適當的 CSS 樣式（例如，text-align: center;），您可以在圓形內對齊文字元素。 </p></div>