如何制作一個(gè)CSS半圓并分開(kāi)

在CSS中制作一個(gè)半圓并分開(kāi)可以通過(guò)使用邊框和背景來(lái)實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例代碼：

HTML代碼：

<div class="half-circle"></div>

CSS代碼：

.half-circle {
  width: 100px; /* 半圓的直徑 */
  height: 50px; /* 半圓的高度 */
  border-radius: 50px 0 0 50px; /* 邊框半徑，控制半圓的形狀 */
  background-color: #ff0000; /* 半圓的顏色 */
  position: relative; /* 定位方式 */
}
.half-circle::before {
  content: ""; /* 偽元素，用于繪制半圓的另一半 */
  position: absolute; /* 定位方式 */
  top: 0; /* 偽元素的位置 */
  left: 50px; /* 偽元素的位置 */
  width: 50px; /* 偽元素的寬度 */
  height: 50px; /* 偽元素的高度 */
  border-radius: 0 50px 50px 0; /* 偽元素的邊框半徑，與之前的邊框半徑相配合，形成完整的圓形 */
  background-color: #ff0000; /* 偽元素的背景顏色，與之前的背景顏色相同 */
}

在這個(gè)示例中，我們使用了兩個(gè)關(guān)鍵的技術(shù)來(lái)實(shí)現(xiàn)半圓的分開(kāi)：邊框半徑和偽元素，我們?cè)O(shè)置了一個(gè)元素的邊框半徑，使其成為一個(gè)半圓，我們使用偽元素來(lái)繪制另一個(gè)半圓，并將其定位在原始半圓的右側(cè)，通過(guò)調(diào)整邊框半徑和偽元素的位置，我們可以輕松地分開(kāi)半圓，并在視覺(jué)上形成一個(gè)完整的圓形。