鍍金池/ 問答/數(shù)據(jù)分析&挖掘  HTML/ 一個div，只用css如何畫出無數(shù)個同心圓？

一個div，只用css如何畫出無數(shù)個同心圓？

這是小米一面的面試題，html里只有一個div，僅僅使用css如何畫出無數(shù)個同心圓？
我能想到的辦法是用偽元素（before和after），然后再定位，但是這樣也只能畫出3個同心圓。

div::before {
            content: '';
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
            top: 45px;
            left: 45px;
            border-radius: 50%;
        }
<div></div>
回答
編輯回答
雨萌萌

徑向漸變 定義若干顏色和透明，即形成若干同心圓。無需偽元素

2018年5月23日 20:53
編輯回答
陪她鬧

box-shadow 想畫多少畫多少

2017年1月19日 23:50
編輯回答
雨蝶

css徑向漸變讓用嗎？

background: repeating-radial-gradient(circle, rgb(255, 255, 255) 5%, rgb(0, 0, 0) 10%);
2017年10月20日 03:00
編輯回答
深記你

之前用box-shadow和border做了些同心圓旋轉動畫，看看效果：
https://codepen.io/ExploringC... https://codepen.io/ExploringC...

同心圓旋轉動畫

2017年6月1日 14:50
編輯回答
情未了

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

2017年9月29日 20:56
編輯回答
命于你

用 scss 寫了一個 box-shadow 的函數(shù)，希望能幫到你

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...

2018年8月28日 04:58
編輯回答
朽鹿

考慮到兼容性，估計要用到canvas

2017年1月11日 09:24