如何使用 HTML 和 CSS 建立圓？

在 HTML 頁面上繪製圓形

無法直接使用 HTML5 和 CSS3 建立圓形元素。但是，可以採用一種技術來創建視覺上類似於圓形的元素。

建立圓角矩形

模擬圓形的關鍵是建立矩形有圓角。 CSS 中的 border-radius 屬性讓我們可以定義角的曲率。

決定半徑

為了實現完美的圓形，border-radius 值應該等於矩形寬度或高度的一半。這可確保角落充分向內彎曲以產生圓形的印象。

範例程式碼

考慮以下建立圓形元素的程式碼片段：

<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 像素的矩形。 border-radius 值設定為 25 像素，即矩形寬度/高度的一半。這會產生一個帶有紅色填充的圓形形狀。