今天我們來學習一個有趣的CSS效果，就是把圓分成兩半。實現這個效果，我們需要以下幾步：
1. 創建一個圓形
首先，我們需要創建一個圓形。可以通過設置height和width相等，border-radius為50%來實現。
p {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: red;
}
2. 把圓形分成兩半
接著，我們需要把圓形分成兩半，我們可以通過偽元素::before和::after來實現。
p::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: blue;
}
p::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: yellow;
}
3. 合并代碼
最后，我們將以上代碼整合成一段CSS代碼，并使用pre標簽把代碼包裹起來，方便展示和復制。
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
}
p {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: red;
position: relative;
}
p::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: blue;
}
p::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: yellow;
}
通過以上CSS代碼，我們就能得到一個非常有趣的效果，把圓形分成兩半。希望本文對大家有所幫助。
上一篇css怎樣畫直角三角形
下一篇css怎樣繪制縱面圖