Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Hello everyone! I’m a front name,

The content in the article is referenced to * CSS New World * this book.

Horizontal radius and vertical radius

Now many people do not know that we usually use a rounded corner value is an abbreviation, for example, we usually write top rounded corner 10px is an abbreviation:

border-top-left-radius:10px; Is equivalent toborder-top-left-radius:10px 10px; 

Copy the code

Where, the first value represents the horizontal radius and the second value represents the vertical radius of the fillet.

Such as:

    <style>
        .talk-dialog {
            position: relative;
            background: deepskyblue;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border-top-left-radius: 30px 60px;
        }
    </style>
Copy the code
 <div class="talk-dialog"></div>
Copy the code

How w to write the border-radius? Its horizontal and vertical radii are distinguished by a slash. Such as:

border-radius: 30px / 40px;

The horizontal radius of the four corners is 30px and the vertical radius is 40px;

Border-radius supports 1 to 4 values. The following values are worth writing:

border-radius:10px 20px / 5% 20% 3% 10%;

Overlapping problems

Do you think that’s it, border-radius? Not really!

Let’s look at the following example:

<! DOCTYPEhtml>
<html lang="en">
<head>

    <style>
        .talk-dialog {
            position: relative;
            background: red;
            width: 100px; // Focus onheight: 100px; // Focus onborder-radius: 30px / 80px; // Focus onmargin: 50px auto; 
        }

        .talk-dialog1 {
            position: relative;
            background: deepskyblue;
            width: 100px; // Focus onheight: 100px; // Focus onborder-top-left-radius: 30px 80px; // Focus onmargin: 10px auto;
        }
    </style>

</head>

<body>
    <div class="talk-dialog"></div>
    <div class="talk-dialog1"></div>
</body>
</html>
Copy the code

Our container size is 100px wide and 100px high. Let me ask you a question!

border-radius: 30px / 80px; And the border – the top – left – the radius: 30 px, 80 px; Are top-left corners of two different containers the same size?

You might not see it like this, but let’s go to absolute layout, where the two elements overlap and see if the top left corner overlaps perfectly, okay?

The answer: The rounded corners are different, because our container’s vertical height is 100px, and our border-radius:30px / 80px setting, our element’s height is not enough to fit two ellipses with half axes of 80px (80+80=160). If this scenario is not constrained, the curves will overlap somewhat. Therefore, the CSS specification makes additional rendering Settings for the overlapping problem of rounded curves. The specific algorithm is as follows:

F =min(L width /S width, L height /S height), L is the width and height of the container, S is the sum of radii,

Calculate our example here: f=min(100/60,100/160)=0.625, f is less than 1, then all rounded corner values are multiplied by f

So: border-radius: 30px / 80px;

The upper-left value is equivalent to:

Border – the top – left – the radius: 18.75 px 50 px;

details

  • Border-radius does not support negative values
  • Areas outside the rounded corners are not clickable
  • Border-radius has no inheritance, so the parent element is set to border-radius, and the child element is still rectangular. To achieve rounded corners, overflow: hidden should be added. (Important, often used in work)
  • Border-radius also supports transition

Advanced usage cases:

Code:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="icon" href="data:; base64,=" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1, maximum - scale = 1.0, user - scalable = no" />
    <meta name=" theme-color" content="# 000000" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <style>
        .radius {
            width: 150px;
            height: 150px;
            border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
            object-fit: cover;
            object-position: right;
        }

        .demo {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 10px auto;
        }

        .radius-1 {
            width: 150px;
            height: 150px;
            object-fit: cover;
            object-position: right;
            background: deepskyblue;
            color: #fff;
            font-size: 40px;
            text-align: center;
            line-height: 120px;
            border-bottom-right-radius: 100%;
        }

        .talk {
            padding: 10px;
            background: deepskyblue;
            border-radius:.5em;
            color: #fff;
            position: relative;
            z-index: 0;
        }

        .talk::before {
            content: "";
            position: absolute;
            width: 15px;
            height: 10px;
            color: deepskyblue;
            border-top: 10px solid;
            border-top-left-radius: 80%;
            left: 0;
            bottom: 0;
            margin-left: -12px;
            -ms-transform: skewX(-30deg) scaleY(1.3);
            transform: skewX(-30deg) scaleY(1.3);
            z-index: -1;
        }
    </style>

</head>

<body>
    <div class="demo demo1">
        <img class="radius" src="./1.jpg" />
    </div>
    <div class="demo demo2">
        <div class="radius-1">1</div>
    </div>
    <div class="demo demo3">
        <div class="talk">Border-radius rounded corner effect is implemented.</div>
    </div>
</body>

</html>
Copy the code

Conclusion:

Welcome to give your valuable advice, like once, if this article makes you get knowledge, please don’t be cheap on your star!