I will briefly talk about my understanding of the circle in htm and css ., About htmcss

I will briefly talk about my understanding of the circle in htm and css ., About htmcss

In the past few days, we have found that many border images require rectangular rounded corners or directly draw a circle. The following is an example of how to draw a circle.

In this sharing, I will show you some examples for better understanding,

We all understand that "border-radius:" is used to draw a circle, and we should set a width and height each time we draw a circle.

So we can understand,

Our circle is cropped in a rectangle (square), while border-radius is the size we want to crop.

Give you some pictures to better understand.

First, set a square with a width of 100px and a height of 100px to a red background, as shown below:

Next, we will add

Border-radius: 50px 0 0 0; effect:

Border-radius: 50px 50px 0 0; effect:

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

Border-radius: 50px 50px 50px 50px; the effect is as follows:

 

After adding the code step by step, the image is changed step by step. I understand the following:

Border-radius: 0 0 0;

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

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

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

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

In addition, they take the radius value on the boundary of the rectangle and then determine the center of the circle (this can be done by changing the radius of the rectangle .)

 

The above is my understanding of border-radius. Which of the following are incorrect.