一个div，只用css如何画出无数个同心圆？

Question

这是小米一面的面试题，html里只有一个div，仅仅使用css如何画出无数个同心圆？
我能想到的办法是用伪元素（before和after），然后再定位，但是这样也只能画出3个同心圆。

div::before {
            content: '';
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
            top: 45px;
            left: 45px;
            border-radius: 50%;
        }

<div></div>

Answer 1

css径向渐变让用吗？

background: repeating-radial-gradient(circle, rgb(255, 255, 255) 5%, rgb(0, 0, 0) 10%);

Answer 2

box-shadow 想画多少画多少

Answer 3

用 scss 写了一个 box-shadow 的函数，希望能帮到你

body {
    display: flex;
    height: 100vh;
}

@function getRound($i) {
  $content: '';
  $s-min: 20;
  $s-max: 70;
  $l-min: 30;
  $l-max: 90;
  @while $i > 0 {
    $i: $i - 1;
    $content: "0 0 0 #{$i * 10}px #{hsl(random(360),$s-min+random($s-max+-$s-min),$l-min+random($l-max+-$l-min))}," + $content;
  }
    @return unquote(str-slice($content, 0, str-length($content) - 1))
}
.round {
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid;
    box-shadow: getRound(20);
}

https://codepen.io/jackpan/pe...

Answer 4

之前用box-shadow和border做了些同心圆旋转动画，看看效果：
https://codepen.io/ExploringC... https://codepen.io/ExploringC...

Answer 5

径向渐变 定义若干颜色和透明，即形成若干同心圆。无需伪元素

Answer 6

考虑到兼容性，估计要用到canvas

Answer 7

可以用 repeating-radial-gradient: https://developer.mozilla.org...