This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

border-radius

Border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis: border-raduis Such as:

The source code:

<! DOCTYPEhtml>
<body>
    <div class="circle-box">
        border-radius: 50%;
    </div>
</body>
<style>
    .circle-box {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: lightblue;
        font-weight: bold;
        color: black;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
</style>
</html>
Copy the code

For the official document of border-RADIUS: developer.mozilla.org/zh-CN/docs/…

Its meaning is:

Allows you to set the outer border corners of an element. Determine a circle when one radius is used and an ellipse when two radii are used. The intersection of this circle with the border creates a rounded corner effect.

So, how do you use two radii? Border-radius is a shorthand for the four attributes: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-right-radius. Short for border-bottom-left-radius and border-bottom-left-radius.

For example, how do you write one of these attributes? Such as the border – the top – left – the radius?

Two radii: first horizontal and then vertical

The link to the border-top-left-radius official website is developer.mozilla.org/zh-CN/docs/…

It is very clear how the two radii are defined in the figure below:

border-top-left-radius: horizontal vertical // HorizontalCopy the code

For example, we only define the upper left corner:

width: 200px;
height: 200px;
border-top-left-radius: 100px 200px;
Copy the code

The renderings are as follows:

The top left corner is horizontal and then vertical, but what about the other three? The answer is the same, “first horizontal, then vertical.” We can remember it as “horizontal, then vertical.”

So how do you use this property to draw an ellipse? Simply set a graph with a width ratio of 2/1 or 1/2 and set border-RADIUS: 50%.