CSS徑向漸變是一種非常常用的渲染方式，它可以為網(wǎng)站設(shè)計帶來一些炫酷的效果。下面，我們將介紹如何使用CSS徑向漸變制作一張?zhí)珮O圖。

.taiji{
width: 200px;
height: 200px;
background: radial-gradient(circle, #fff, #000);
border-radius: 50%;
position: relative;
}
.taiji::before{
content: "";
display: block;
position: absolute;
width: 50%;
height: 100%;
background: #fff;
left: 0;
top: 0;
border-radius: 50%;
transform: rotate(180deg);
}
.taiji::after{
content: "";
display: block;
position: absolute;
width: 50%;
height: 100%;
background: #000;
right: 0;
top: 0;
border-radius: 50%;
}
.taiji div{
position: absolute;
width: 60px;
height: 60px;
background: #000;
border-radius: 50%;
top: 50%;
margin-top: -30px;
}
.taiji div:first-child{
left: 50%;
margin-left: -30px;
}
.taiji div:last-child{
right: 50%;
margin-right: -30px;
background: #fff;
}

上述代碼中，我們?yōu)?.taiji 元素設(shè)置了一個徑向漸變的背景色，用于設(shè)置太極圖的黑白兩半。同時，我們又在 .taiji::before 和 .taiji::after 偽元素中，分別制作了黑白兩個小圓以呈現(xiàn)太極圖的陰陽對稱。最后，我們再用兩個 div 元素，分別設(shè)為黑白兩色，放置在 .taiji 元素中間，就成功地制作了太極圖。