[分享]css两个盒子如何做成同心圆

实现同心圆的方法有很多种，下面介绍一种利用CSS实现两个盒子同心圆的方法：

.outer-circle{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  position: relative;
}

.inner-circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
} 

上面的代码中，外圆的盒子使用border-radius属性设置为50%实现圆形，内圆盒子的宽高设置为外圆的一半，通过position: absolute;和top、left属性让内圆盒子居中展示，再通过transform属性的translate函数让其相对于自身的50%偏移。

效果图如下：