如何使用 HTML 和 CSS 建立圓？-css教學-PHP中文網

如何使用 HTML 和 CSS 建立圓？

Barbara Streisand

發布： 2024-11-27 08:25:13

原創

956 人瀏覽過

How Can I Create a Circle Using HTML and CSS?

在 HTML 頁面上繪製圓形

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

建立圓角矩形

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

決定半徑

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

範例程式碼

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

<div>

登入後複製

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

登入後複製

在此範例中，我們建立一個寬度和高度均為50 像素的矩形。 border-radius 值設定為 25 像素，即矩形寬度/高度的一半。這會產生一個帶有紅色填充的圓形形狀。

以上是如何使用 HTML 和 CSS 建立圓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！