Front-End Knowledge | CSS Tips-Adaptive ellipse

Background Knowledge:

The basic usage of the Border-radius property.

Problem:

You may have noticed that by setting a large enough border-radius for any square element, you can turn it into a circle. The CSS code used is as follows:

Figure 1.1 gives the element a fixed width and a half length of Border-radius, you can get a circular

You may also notice that if you specify any radius greater than 100px, you can still get a circle. The specification specifically points out the reasons for this:

"When the sum of the radii of any two adjacent fillets exceeds the size of the BorderBox, the user agent must proportionally reduce the values used for each border radius until they do not overlap each other." "--css Background and Borders (third edition) (http://w3.org/TR/css3-background/#corner-overlap)

virtual line indicator.

Solution:

Speaking of Border-radius, there is a little-known truth: It can specify the horizontal and vertical radii individually, as long as a slash (/) separates the two values. This feature allows us to create oval fillets around the corner (see Figure 1.3). So, if we have an element with a size of 200pxx150px, we can specify two radius values of its rounded corners as half the width of the element, thus obtaining an exact ellipse:

Figure 1.3 A container sets unequal horizontal and vertical border-radius; The arc at the corner now shows the shape of the ellipse, and the horizontal and vertical radii of the ellipse are the values we specify for the Border-radius, marked with a dashed line in the diagram.

Figure 1.4 Creates an ellipse with an asymmetric border-radius curve.

We can see the results in Figure 1.4. However, there is a big flaw in this code: as long as the dimensions of the elements change, the value of the Border-radius is changed. As we can see in Figure 3-5, when the dimension of an element becomes 200pxx300px, what happens if the Border-radius does not follow the change. So, if our element size changes with its content, that's a problem. Are we really desperate? In fact, Border-radius this attribute has another little-known truth, it can not only accept the length value, but also accept the percentage value. This percentage value is parsed based on the dimension of the element, that is, the width is used for the resolution of the horizontal radius, and the height for the resolution of the vertical radius. This means that the same percentages may be calculated for different horizontal and vertical radii. Therefore, if you want to create an adaptive ellipse, we can set both radius values to 50%:

Since the two values before and after the slash are now consistent (even though they may eventually be computed as different values), we can further simplify this line of code to:

In the end, only this line of code is needed, so we can get an adaptive ellipse.

Extension: Shorthand for Border-radius

Extend a code half ellipse: border-radius:100% 0 0 100%/50%; 1.5 half ellipse can be formed

Figure 1.5

Extend a code implementation 1/4 ellipse: border-radius:100% 0 0 0; To form the 1/4 ellipse shown in 1.6

Figure 1.6

Small tidbits:

Why is it called Border-radius? It may be strange that border-radius the name of the man. This property does not need a border to participate in the work, it seems to call it corner-radius more appropriate. The name really sounds confusing at first, in fact because the Border-radius is a fillet of elements borderbox. When an element has no border, it may not see the difference, and when it has a border, the corner of the outer border of the bounding rectangle is used as a datum for the tangent fillet. The fillet on the inside of the border will be slightly smaller (strictly speaking, the internal radius will be Max (0,border-radius-border-width)).

Hai said software will continue to introduce the front-end teaching courses, technical dry.

-end-

Front-End Knowledge | CSS Tips-Adaptive ellipse