Before the appearance of the CSS3 property border radius, we must draw a circle on the page with the help of pictures. After the border radius property, it is very easy for us to realize a circle on the page. Next, let’s study this border radius carefully to see what kind of black magic does it have?
A study of border radius
It’s easy to draw a circle through border radius. We start to explore border radius with such a small example.
To draw a positive circle, we first need to have a square, so add border radius: 50px to the square with width and height of 100px; students may wonder how it is calculated. What does 50px represent? Now let’s look at the console:
The above content makes us unfold, although we only write a value of 50px; for the browser, he thinks it is four same values. For border – * – radius, the expansion attribute corresponds one by one. See the similar properties that you can think of here (setting a property will be applied to multiple properties of expansion properties):
**margrin(margin-left,margin-top, margin-right, margin-bottom)
padding(padding-left,padding-top, padding-right, padding-bottom)
Border (border width, border style, border color, you can continue to expand)**
For margin and padding, we all know that their order isUpper right lower left。 And a value. What are the corresponding values? I won’t say much here. By analogy, border radius’s order is not as simple as up, down, left and right according to its attributes. Instead,Top left, top right, bottom right, bottom left.
According to the above analysis, if we write:
Border radius: 50px; consistent with border radius: 50px50px50px50px.
(similar to margin: 10px; and margin: 10px 10px 10px 10px;)
Students here should pay attention to:We are used to saying, top left, top right, but when this attribute is expressed, first of all, top down, and then left and right, that is, border top left radius.
From the above four attributes, we can see that our circle should be composed of four parts. What happens when we modify the parameters?
In this way, it’s equivalent to border top left radius: 50px; look at another picture:
Through this picture, we can make it clear that the fillet we see is actually a circle drawn with the top left corner as the starting point, the horizontal 50px, the vertical 50px as the center and the 50px as the radius. The overlap with the top left corner of the original Div. **It’s the fillet we see. The same reason:
Border radius: 0 50px 0 0; border top right radius: 50px;
This is:Starting from the upper right corner, the circle is drawn with the horizontal 50px, the vertical 50px as the center and the 50px as the radius. The overlap with the top right corner of the original Div.
Similarly, I don’t explain it to the bottom right and the bottom left. It is the lower right corner and the lower left corner at the starting position. Also note here.Our circle is not drawn directly, not a circle center, but a circle formed by four circles drawn with four centers overlapping with the corresponding direction of the original Div.
Let’s explore whether our attribute can be negative? What’s the maximum? What do they mean?
Can it be negative?
Let’s set it to negative. Let’s see.
We don’t look at the style. Let’s look at the error report of the style:
The description value is not valid. Why is it invalid? We have analyzed above. We need to draw a circle according to the numerical value. But the radius of a circle has no negative value. Even if it can be negative, it has no practical significance to draw to the outside of the original Div. So there’s no negative value.
- What is the maximum value?
According to our analysis above, when we set a larger radius, the circle will also change. Does that mean that the fillet can be infinite? Let’s try (let’s say an element with a width of 100 pixels and a height of 100 pixels)
It is found that there is no change, which indicates that:The maximum radius of a circle is twice the width and height of Div. What about the rectangle?
This is a rectangle with a width of 200px and a height of 100px. The radius of our fillet is 200 Px, twice the width and twice the height. According to our analysis above, it should be an ellipse with a width of 200 and a height of 100. Let’s look at the results:
It’s not hard to find a circle with a width of 100 pixels and a height of 100 pixels. Our expectation is different.
Here is another knowledge point to explain:
Border-top-left-raidus: x y;
You seem to understand that we can set X offset and Y offset respectively, which means that we can actually make ellipses. Let’s try.
It’s really an ellipse at first sight.
The situation above
The form of expression is consistent.
Here’s a summary:
When a value is used, width and height are the same, when any value (height and width) exceeds the minimum value of width and height. By default, the shortest value is selected for width and height, that is, the lowest value is selected for all. Because 200 doesn’t mean 200, and 100 means only 100.
When two values are used, the situation is a little different. Here’s an example:
If you don’t read it wrong, it’s 2000 px;
Let’s take a look at the results.
Here, I will say the result directly.
When writing separately, if the maximum value exceeds the maximum value of width and height, it will be scaled by the maximum value of width and height.
Let’s see 200:10
It’s the same. (what may happen here is that when the picture is too large, GPU rendering will deviate, which may be different.).
Next let’s see, if there is a border, how to calculate the fillet?
We set a width and height of 100px, a border of 20px, and a fillet of 20px
We can see that the outer border is also rounded. How did I draw it? I’ll explain it with the help of a picture:
A border top left radius of 20px is drawn on the original basis. The square sector with width and height of 20px covers the fillet.
The starting point is still the upper left corner, the rule of circle drawing remains unchanged, and the maximum value is
(border top / border left minimum)
(border right / border bottom minimum)
(padding top, padding left minimum)
(padding bottom, padding right minimum)
Width / height minimum
20+ 20 + 20 + 20 + 50 = 130
For the calculation of the above formula, you can understand it. When our properties are written separately. When it comes to proportional scaling, we will not explore it here. Students can try it on their own.
Let’s finish with border radius
We can make it clear that the first reaction of the X, y students in each corner is
Here’s a simpler expression:
border-radius:10px 10px 10px 10px/ 20px 20px 20px 20px;
It’s the same as the above method, which is to write the values of X and Y separately, using / to separate them.
Finally, I will add a little bit.
We border radius: the meaning of the next two values and three values.
When the border radius parameter is two values (x, y), it means
Top left, bottom right: X
Top right, bottom left: y
When the border radius parameter is two values (x, y, z), it means:
Top left: X
Top right, bottom left: y
Right bottom: Z