Simply talk about your understanding of the HTM and CSS in the circle.

In recent days, in the use of CSS editing, found that a lot of border image requirements are rectangular rounded corners or directly to draw a circle example, below and we share the view of the circle.

In this sharing, I focus on giving you some examples to better understand,

We all know that when we draw a circle we use "Border-radius:", and each time we draw a circle, we should set a width and height first.

So we can understand that,

Our circle is clipped in a rectangle (square), and Border-radius is the size we want to crop.

Give you some pictures, better to understand.

First, we set a square with a width of 100px and a height of 100px, set to a red background, as follows

Next, we add the following

border-radius:50px 0 0 0, the effect is as follows:

border-radius:50px 50px 0 0; the effect is as follows:

border-radius:50px 50px 50px 0, the effect is as follows:

border-radius:50px 50px 50px 50px, the effect is as follows:

By adding the code in step by step above, the picture is changed one step at a-I understand the following:

border-radius:0 0 0 0;

Of the four values, the first value is the circle radius of the upper-left corner of the rectangle (1/4 of the circle);

The second value is the circle radius of the upper-right corner of the rectangle (1/4 circle);

The third value is the circle radius of the lower-right corner of the rectangle (1/4 circle);

The fourth value is the circle radius of the lower-left corner of the rectangle (1/4 circle);

Also, they take a radius value on the boundary of the rectangle and then determine the center of the circle (this completes the rectangular fillet, which is achieved by changing the radius.) )

The above is my understanding of Border-radius, what is wrong, welcome comments.

Simply talk about your understanding of the HTM and CSS in the circle.