How to draw 6 concentric circles using ONLY CSS? Or even an infinite number of concentric circles?

What if I wanted to draw a circle in CSS?

Div, width and height equal, direct border-radius: 50%; It is good!

What if I draw two concentric circles?

Add border: 10px solid red; Now you have a red ring with a width of 10px.

What about three, four, five, six concentric circles?

::before and ::after can be made into two boxes. Together, you can make up to 6 concentric circles.

#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;
}
Copy the code

What about an infinite number of concentric circles?

This is the ultimate trick, box-shadow. The BOX-shadow property of CSS is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

The parameter order of box-shadow is

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);
Copy the code

Use box-shadow to implement the six concentric circles above

#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;
}
Copy the code

Isn’t it very simple 😊😊😊