本文目錄導(dǎo)讀：

1. 繪制圓形
2. 繪制橢圓
3. 繪制半圓

CSS形狀藝術(shù)：繪制圓形、橢圓與半圓

本文將指導(dǎo)您如何利用CSS（層疊樣式表）繪制不同形狀的圖形，包括圓形、橢圓以及半圓，我們將深入探討如何使用CSS的屬性，幫助您理解并掌握這些基本圖形的繪制技巧。

繪制圓形

在CSS中，繪制圓形主要依賴于border-radius屬性，當(dāng)您設(shè)置一個元素的邊框半徑為50%時，該元素就會變成一個***的圓形。

.circle {
  width: 100px;  /* 設(shè)置寬度和高度以控制圓的大小 */
  height: 100px; 
  background-color: #ff0000;  /* 設(shè)置背景顏色 */
  border-radius: 50%;  /* 設(shè)置邊框半徑為50%，使元素變?yōu)閳A形 */
}

繪制橢圓

橢圓形的繪制與圓形的原理相似，只是需要在水平和垂直方向上設(shè)置不同的半徑。

.ellipse {
  width: 200px;  /* 設(shè)置水平方向的半徑 */
  height: 100px; /* 設(shè)置垂直方向的半徑 */
  background-color: #ffcc00;  /* 設(shè)置背景顏色 */
  border-radius: 50% / 30%; /* 水平半徑大于垂直半徑，形成橢圓 */
}

繪制半圓

半圓形的繪制需要利用到偽元素::before或::after以及border-radius屬性。

.half-circle {
  position: relative; /* 相對定位 */
  width: 200px; /* 設(shè)置寬度和高度以控制半圓的大小 */
  height: 100px; 
  background-color: #ffffff; /* 設(shè)置背景顏色 */
}
.half-circle::before { /* 使用偽元素創(chuàng)建半圓 */
  content: ""; /* 必須設(shè)置內(nèi)容屬性為""才能生成偽元素 */
  position: absolute; /* ***定位相對于***近的定位祖先元素 */
  top: 0; /* 調(diào)整位置 */
  left: 50%; /* 調(diào)整位置 */
  width: 100%; /* 設(shè)置寬度和高度以控制半圓的大小 */
  height: 50px; /* 高度的一半 */
  background-color: inherit; /* 與父元素相同的背景顏色 */
  border-radius: 50%; /* 設(shè)置邊框半徑為50%，形成半圓 */
}

CSS為我們提供了強(qiáng)大的工具來創(chuàng)建各種形狀，通過理解并利用border-radius屬性和偽元素，我們可以輕松地創(chuàng)建圓形、橢圓和半圓等形狀，這些技巧不僅可以幫助我們設(shè)計(jì)更美觀的界面，還可以提高我們的編程技能和對CSS的理解。