CSS是前端開發中不可或缺的一部分，通過CSS的編寫，頁面能夠呈現出美觀、簡潔的效果。CSS可謂千變萬化，今天我們就來介紹一下如何用CSS來實現太極圖！

.taiji{
width:300px;
height:300px;
border:1px solid #000;
border-radius:50%;
margin:100px auto;
position:relative;
}
.taiji:before{
content:'';
width:150px;
height:150px;
background-color:#000;
border-radius:50%;
position:absolute;
left:50%;
top:0%;
transform:translate(-50%,-50%);
}
.taiji:after{
content:'';
width:150px;
height:150px;
background-color:#fff;
border-radius:50%;
position:absolute;
left:50%;
bottom:0%;
transform:translate(-50%,50%);
}
.taiji:hover:before{
background-color:#fff;
}
.taiji:hover:after{
background-color:#000;
}

首先，我們創建了一個class為taiji的元素，設置了它的寬度、高度、邊框和圓角等樣式屬性，以及居中和相對定位等位置屬性。

然后，我們加入兩個偽元素：before和after。其中before元素用來表示陽，也就是黑色的那部分；after元素用來表示陰，也就是白色的那部分。這兩個元素都設置了顏色、圓角、絕對定位和偏移量等屬性，使它們能夠正確地出現在太極圖的頂部和底部。

最后，我們使用:hover偽類，通過hover事件改變偽元素的背景顏色，實現太極圖的動態效果。

所以，我們就可以使用這段簡單的CSS代碼，輕松地制作出一個漂亮的太極圖效果啦！