CSS3是一種用于網頁設計的語言，可以實現(xiàn)豐富的效果。其中Taichi（太極）圖形是一個非常有趣的挑戰(zhàn)。接下來，我們將學習如何使用CSS3畫一個太極符號。

/*定義太極背景的樣式*/
.tai-chi-bg {
width: 200px;
height: 200px;
border-radius:50%; /*設置圓形背景*/
background-color: #000; /*背景顏色設置為黑色*/
}
/*定義太極的陰陽兩面，并使用偽元素創(chuàng)建*/
.tai-chi-bg:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 200px;
background-color: #fff; /*背景顏色設置為白色*/
border-radius: 100px 0 0 100px; /*設置左半部分為弧形*/
}
.tai-chi-bg:after {
content: '';
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
width: 100px;
height: 200px;
background-color: #000; /*背景顏色設置為黑色*/
border-radius: 0 100px 100px 0; /*設置右半部分為弧形*/
}
/*定義太極的點，使用border-radius為空心圓*/
.tai-chi-bg .yin:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%; /*看起來像個圓形*/
}
.tai-chi-bg .yang:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%; /*看起來像個圓形*/
}

我們定義了太極的背景，陰陽兩面和中心的點。使用CSS3，我們可以很容易地完成這一任務。