另一种画同心圆的方法

平常我们画同心圆可能是大圆套小圆，然后里面小圆居中背景颜色设为白色。

今天在鼓捣某功能时，发现一个好玩的用法：使用box-shadow。

先来看看box-shadow的相关属性：

画的同心圆：

.page-wrapper {
   width: 40px;
   height: 40px;
   box-shadow: rgb(243 32 32 / 60%) 0 0 0 50px;
   border-radius: 50%;
   margin-left: 100px;
   margin-top: 100px;
 }

<div class="page-wrapper">   
</div>

效果：

由于圆圈其实就是阴影，而阴影部分不算在body里面，就会出现圆圈脱离文档流的现象：

不过我们可以用中间的小白圆进行定位和布局。