如何只用css画出6个同心圆？甚至无数个同心圆？-一一网

如果要用css画一个圆怎么做呢？

这个很简单啦，一个div，宽高相等，直接border-radius: 50%;就好啦！

那如果说画两个同心圆呢？

也不难，在上面的基础上加上border: 10px solid red;就多了一个宽度为10px，颜色为红色的圆环啦！

那3、4、5、6个同心圆呢？

border也用完了，那用伪元素吧，::before和::after可以做成两个盒子，加起来最多可以做6个同心圆啦！

#circle{
  width: 250px;
  height: 250px;
  background: #9c88ff;
  border-radius: 50%;
  border: 25px solid #00a8ff;
}

#circle::before{
  content: '';
  width: 150px;
  height: 150px;
  background: #fbc531;
  position: absolute;
  transform: translate(25px, 25px);
  border-radius: 50%;
  border: 25px solid #4cd137;
}

#circle::after{
  content: '';
  width: 50px;
  height: 50px;
  background: #dcdde1;
  position: absolute;
  transform: translate(75px, 75px);
  border-radius: 50%;
  border: 25px solid #e84118;
}
复制代码

那无数个同心圆呢?

这就要搬出终极大招了，box-shadow，css的box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

box-shadow的参数顺序为

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
复制代码

使用box-shadow实现上面的6个同心圆

#circle{
  width: 50px;
  height: 50px;
  background: #dcdde1;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #e84118, 0 0 0 50px #fbc531, 0 0 0 75px #4cd137,0 0 0 100px #9c88ff,0 0 0 125px #00a8ff;
}
复制代码