undefinedfix
Sign in

A div, through CSS to control the style, how many concentric circles can be produced at most

suxbr edited in Fri, 23 Sep 2022

How many concentric circles can a div and CSS form at most (premise: can't solve / repeat radial gradient by setting background image)

Meituan interview questions:

自己尝试的结果以及各自实现的本质

What are your expectations? What is the actual error message?

Now I can't set pseudo elements all the time, so I can make three concentric circles at most. The premise is not to increase the number of concentric circles by repeating radial gradient or background image

Of course, you can use box shadow on pseudo elements, so there can be at most four concentric circles. My brother wants to ask the gods of CSS. Can you give me a hint, that is, what area can I add concentric circles through? How many concentric circles can I add in the end

The source of the topic and my own ideas

Related codes

//Please paste the code text below (do not use pictures instead of codes)

What are your expectations? What is the actual error message?

2 Replies
Techtoy
commented on Fri, 23 Sep 2022

Box shadow can cover many layers

    box-shadow: 0 0 0 10px #f80, 0 0 0 20px #8f0, 0 0 0 30px #ff0, 0 0 0 40px #08f;

This is the effect of adding the above style to your avatar

As for the upper limit of "many", there is no relevant description on MDN, which is estimated to be related to the browser implementation

It's OK to have 200 layers on chrome

clipboard.png

idontknow
commented on Fri, 23 Sep 2022

You can also use shadow to implement a round box shadow

.div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px rebeccapurple;
}