持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第35天，点击查看活动详情

昨天用div画了一个太极八卦图，发布文章后才发现少了两个小圆，难怪感觉怪怪的，于是今天补上这两个小圆，另外在实现上也比之前更好了，算是第一版的升级版。一起来看看吧

用div+before+after实现

.taiji {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(#fff 50%, #000 0);
    border-radius: 100px;
}
.taiji::before {
    position: absolute;
    z-index: 1;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    top: 85px;
    left: 35px;
    box-shadow: 100px 0 0 0 #000;
}
.taiji::after {
    position: absolute;
    top: 50px;
    left: 0;
    content: '';
    width: 100px;
    height: 100px;
    background-color: #000;
    border-radius: 50px;
    box-shadow: 100px 0 0 0 #fff;
}

大圆如何画

盖上两个中等的圆

另一个圆是用box-shadow画出来的，我们把大圆的颜色去掉就可以看到效果了：

补上两个小圆

大功告成！原理就是利用box-shadow可以轻易复制一个或多个相同形状的'母元素'，如果你的'母元素'是半圆，你是复制不出圆形的，而且也复制不出方向不同的半圆，这就是为什么这次我采用的是圆形盖压而不是半圆。知道这个要点后，其实我们可以只借助一个伪元素就能画出刚刚的效果。

div+before或者after实现

.taiji {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(#fff 50%, #000 0);
    border-radius: 100px;
}
.taiji::before {
    position: absolute;
    content: '';
    top: 85px;
    left: 35px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #000;
    box-shadow: 100px 0 0 0 #fff,
    100px 0 0 35px #000,
    0 0 0 35px #fff;
}

这边需要特别注意的点是，多个阴影的顺序是有规律的，不能随便写。总结起来就是有重叠部分的阴影小的阴影要写在前面，大的写在后面，不然小的会被覆盖掉。这个需要大家多尝试，自己发现的规律才是自己的。

结语

大家如果觉得本文不错的话，请不要吝惜自己的点赞，您的点赞是我不断前进的动力，创作出更多有意思的文章出来。感谢支持！