CSS可以制作出許多有趣的效果，今天我們來學(xué)習(xí)一下如何使用CSS畫出太極圖案。

.taiji{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #000;
position: relative;
}
.taiji:before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FFF;
transform: translateX(-50%);
}
.taiji:after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
transform: translateX(-50%);
}

首先我們創(chuàng)建一個(gè)寬高為200px的圓形容器，并設(shè)置為黑色。接下來，我們再分別創(chuàng)建一個(gè)白色圓形和黑色圓形，作為太極圖案的兩個(gè)部分。這兩個(gè)圓形都設(shè)置為寬度和高度為100px，并將其位置分別設(shè)置在容器的上半部分和下半部分。

為了讓這兩個(gè)圓形更好的呈現(xiàn)太極圖案的效果，我們將它們分別設(shè)置為白色和黑色。這樣就可以很好的體現(xiàn)出“陰”與“陽”的概念。

最后，通過使用“:before”和“:after”偽元素，我們將這兩個(gè)圓形粘貼到容器上面，以實(shí)現(xiàn)完整的太極圖案。