当前位置：网站首页>Boder radius has four values, and boder radius exceeds four values

Boder radius has four values, and boder radius exceeds four values

2022-07-06 20:17:00 【imkaifan】

Problem description ：

border-radius If it is 4 Value , In turn, it represents the upper left corner 、 Upper right corner 、 The lower right corner 、 The lower left corner .

But if you write it like this, it won't work ？ border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;

boder-radius The role of

Back to the beginning ,css What did this magic wand do ？

CSS attribute border-radius Allows you to set the rounded edges of elements . When using a radius, determine a circle , When using two radii, determine an ellipse . This ( Ellipse ) The intersection of the circle and the border forms a fillet effect .

Even if the element has no border , Rounded corners can also be used background above , The specific effect is affected by background-clip influence

demo1:
Insert picture description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .myDiv {
    
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      height: 500px;
      border: 2px solid red;
      border-radius: 125px 125px 125px 125px;
    }
  </style>
</head>
<body>
   <div class="myDiv">
   </div>
</body>
</html>

Code and schematic diagram above , Roughly know how to draw this trajectory

demo2：

border-radius To put it bluntly, you can draw an irregular figure , But we can know from the above , Irregularity is irregularity , But it must be round , Or right angles , Writing a negative value does not mean that it is an obtuse angle , Or sharp corners . Negative values are treated as 0

border-radius: 4px 3px 6px / 2px 4px;

/*  Equivalent to ： */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;


     
border-radius: 25px 50px 70px 60px/50px 25px 10px 10px;
  /*  Equivalent to ： */
border-top-left-radius:     25px 50px;
border-top-right-radius:    50px 25px;
border-bottom-right-radius: 70px 10px;
border-bottom-left-radius:  60px 10px;

Insert picture description here
border-radius: 25px 50px 70px 60px/50px 25px 10px 10px; The drawing is the above figure , Don't omit the eight values , Or you need to remember the corresponding relationship of missing values , Too annoying , So don't try to save trouble , Write the whole , Others can understand