用css画出无数个同心圆

/* background(repeating-radial-gradient)/border/box-shadow(可设置多个) */
/* 添加伪元素 */

/* css样式 */
.gradient{
				width:150px;
				height: 150px;
				border-radius: 50%;
				background: repeating-radial-gradient(circle,rgb(255, 255, 255) 0, rgb(255, 255, 255) 5%,transparent 5%,rgb(0, 0, 0) 5%, rgb(0, 0, 0) 10%)
			}
			.circle{
				margin:200px auto;
				position: relative;
				width:100px;
				height: 100px;
				border-radius: 50%;
			    background: coral;
			    border: 5px solid lightblue;
			    box-shadow: 0 0 0px 5px cadetblue, 0 0 0px 10px lightgrey, 0 0 0px 15px rosybrown;
			}
			.circle:after{
				width:70px;
				height: 70px;
				position: absolute;
				margin:auto;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background: peachpuff;
			    display: block;
			    z-index: 2;
			    content: '';
			    border-radius: 50%;
			    box-shadow: 0 0 0 5px rebeccapurple;
			    border: 5px solid lightsalmon;
			}
			.circle:before{
				width:40px;
				height: 40px;
				position: absolute;
				margin:auto;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background: lightpink;
			    display: block;
			    z-index: 9999999;
			    content: '';
			    border-radius: 50%;
			    box-shadow: 0 0 0 5px purple;
			    border: 5px solid lightgoldenrodyellow;
		}

<!--同心圆-->
		<div class="circle">
			
		</div>
		<div class="gradient">
			
		</div>