css径向渐变太极图 |css弹出层居中

.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;
}

上述代码中，大家为 .taiji 元素设置了一个径向渐变的背景色，用于设置太极图的黑白两半。同时，大家又在 .taiji::before 和 .taiji::after 伪元素中，分别制作了黑白两个小圆以呈现太极图的阴阳对称。最后，大家再用两个 div 元素，分别设为黑白两色，放置在 .taiji 元素中间，就成功地制作了太极图。