CSS3是一種強(qiáng)大的樣式表語言，通過它我們可以實(shí)現(xiàn)很多有趣的效果。其中一個(gè)經(jīng)典的例子便是用CSS3來制作太極圖案。

/* 太極圖樣式 */
.taiji {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
/* 太極陰陽兩極 */
.taiji:before,
.taiji:after {
content: "";
position: absolute;
width: 100%;
height: 50%;
}
/* 陰、陽兩極的顏色 */
.taiji:before {
background-color: #000;
}
.taiji:after {
background-color: #fff;
bottom: 0;
}
/* 太極圖案的中央和兩極的圓點(diǎn) */
.taiji .small-circle {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.taiji:before .small-circle {
top: 0;
}
.taiji:after .small-circle {
bottom: 0;
}
/* 太極圖案的曲線效果 */
.taiji:before {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.taiji:after {
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}

我們可以通過以上的CSS代碼來實(shí)現(xiàn)一個(gè)酷炫的太極圖案。通過設(shè)置不同的顏色、大小、位置和圓角等屬性，我們可以創(chuàng)造出許多不同形態(tài)的太極圖案。CSS3的強(qiáng)大之處在于我們可以完全控制元素的樣式，只需稍加思考，便可以創(chuàng)造出令人驚嘆的效果。