今天我們來學習一下如何使用CSS來制作太極圖。

首先，我們需要在HTML文件中創建一個div元素，作為整個太極圖的容器：

<div class="taiji">
</div>

接著，我們使用CSS來給這個div增加樣式，讓它成為一個帶有太極圖的容器：

.taiji {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
}
.taiji::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.taiji::after {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000000;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

上面的代碼中，我們使用了偽元素::before和::after來創建太極圖的兩個半邊。

在太極圖的中央，我們可以添加一些符號，來讓整個圖形更為完整。代碼如下：

.taiji::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.taiji::before::before {
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.taiji::after {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000000;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.taiji::after::before {
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

這樣，我們就成功地創建了一個漂亮的太極圖！

總的來說，使用CSS來制作太極圖，可以讓我們更加深入地了解CSS的強大功能，也可以讓我們在網頁中添加更豐富、更有趣的內容。希望我們今天的學習，對大家有所幫助。