太極圖是一種著名的中華文化符號，它常常被用來表示陰陽兩極和宇宙萬物的和諧統一。在網頁設計中，我們也可以使用CSS來制作太極圖效果。下面我們就來一步步學習如何使用CSS制作太極圖。

.taiji{
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000;
background-color: #000;
box-shadow: 2px 0 10px rgba(0,0,0,0.5) inset;
}
.taiji::before{
content: "";
display: block;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
.taiji::after{
content: "";
display: block;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
border-radius: 50%;
background-color: #000;
}
.taiji:hover::before{
background: #000;
}
.taiji:hover::after{
background: #fff;
}

首先，我們創建一個class為taiji的div。為了讓它成為一個圓形，我們設定它的寬高為200px，并把它的邊框半徑設為50%。接著，我們為它設置一個黑色背景，一個白色圓和一個黑色圓。我們使用::before選擇器來創建白色圓，使用::after選擇器來創建黑色圓。通過position:absolute和left:50%屬性，我們把它們放到了圓心位置。然后，我們為白色圓設置了z-index：1，使其浮在黑色圓的上面。

最后，通過:hover選擇器，我們為太極圖添加了鼠標懸停效果，使白色圓和黑色圓在鼠標懸停時互相交替改變顏色。