一个div+css实现同心圆效果的n中方式
一. 常规方法(合理的)
1.1 box-shadow可以无限套
box-shadow: 0 0 0 10px red, 0 0 0 20px black, 0 0 0 30px red, 0 0 0 40px black,0 0 0 50px red;
1.2 重复径向渐变属性
background: repeating-radial-gradient(circle, rgb(255, 255, 255) 5%, rgb(0, 0, 0) 10%);
1.3 ::伪元素法+border
同理,伪元素也是一个元素,所以伪元素也可以当成一个div来使用同样的方法,给他加box-shadow再实现同心圆效果
<div id="d3">
</div>
#d3{
background-color: #ff5000;
width: 150px;
height: 150px;
margin: 30px;
border-radius: 50%;
position: relative;
box-shadow: 0 0 0 30px rgba(255,80,0,.2);
}
#d3::before {
content: '';
width: 80px;
height: 80px;
background-color