在前端開(kāi)發(fā)的過(guò)程中，有時(shí)候需要畫(huà)出多個(gè)半圓的效果，那么今天我們就來(lái)講一下如何使用CSS來(lái)畫(huà)多個(gè)半圓。

// 圓的直徑
$diameter:60px;
// 半圓的寬度
$half-diameter: 30px;
// 半圓1
.half-circle-1 {
width: $diameter;
height: $half-diameter;
border-radius: $half-diameter $half-diameter 0 0;
}
// 半圓2
.half-circle-2 {
width: $half-diameter;
height: $diameter;
border-radius: $half-diameter $half-diameter 0 0;
transform: rotate(90deg);
}
// 半圓3
.half-circle-3 {
width: $diameter;
height: $half-diameter;
border-radius: 0 0 $half-diameter $half-diameter;
}
// 半圓4
.half-circle-4 {
width: $half-diameter;
height: $diameter;
border-radius: 0 0 $half-diameter $half-diameter;
transform: rotate(90deg);
}
// 畫(huà)出多個(gè)半圓
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.half-circle {
margin: 10px;
border: 2px solid #000;
background-color: #fff;
}
}

在代碼中，我們首先定義了圓的直徑和半圓的寬度，然后分別定義了四個(gè)不同樣式的半圓，每個(gè)半圓使用的都是圓形的邊框半徑來(lái)實(shí)現(xiàn)的。最后我們通過(guò)flex布局的方式來(lái)畫(huà)出多個(gè)半圓，通過(guò)定義一個(gè)類名為container的父元素，然后依次顯示每個(gè)半圓的div即可。