基本知识

（1）border-radius是css3新增加的属性，用来设置盒子的圆角。

表示法

四值表示法：左上，右上，右下，左下（顺时针）如：border-radius: 10px 20px 30px 40px;
单值表示法：四个角统一设置，如：border-radius: 10px;
拆分表示法：
- 左上：border-top-left-radius: 20px;
- 右上：border-top-right-radius: 20px;
- 左下：border-bottom-left-radius: 20px;
- 右下：border-bottom-right-radius: 20px;
  属性值：可以是长度单位（如：px），可以是百分比。

（2）border-radius 还可以为每个角单独设置两个临界边的半径

border-top-left-radius: top边半径 left边半径;
border-top-right-radius: top边半径 right边半径;
border-bottom-left-radius: bottom边半径 left边半径;
border-bottom-right-radius: bottom边半径 right边半径;

border-radius是复合属性，可以将以上四个属性统一设置。

border-radius: 左上角top边半径右上角top边半径右下角bottom边半径左下角bottom边半径 /左上角left边半径右上角right边半径右下角right边半径左下角left边半径

如：border-radius: 20px 40px 60px 80px / 30px 60px 90px 120px;

案例

下面是看案例，敲一遍就能明白了，我们来制作下面的图形
在这里插入图片描述

以第一个图片为例

首先，我们找需要设置那些角：很明显，左上角和右下角。
其次，我们发现左上角的上边距是其宽度的100%，左上角的左边距也是高度的100%
那我们可以这样设置角（前提盒子的宽度100px，高度200px）

 border-top-left-radius: 100px 200px;
 border-bottom-right-radius: 100px 200px;

或者

 border-top-left-radius: 100%;
 border-bottom-right-radius: 100%;

或者整体写

 border-radius: 100px 0 100px 0/200px 0 200px 0;

第一个图形完整代码如下

 .box1 {
            width: 100px;
            height: 200px;
            border-top-left-radius: 100px 200px;
            border-bottom-right-radius: 100px 200px;
            background-color: pink;
        }

所有图形制作的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* float: left; */
            margin-right: 10px;
            margin-bottom: 10px;
            display: inline-block;
           
        }
        
        .box1 {
            width: 100px;
            height: 200px;
            border-top-left-radius: 100px 200px;
            border-bottom-right-radius: 100px 200px;
            background-color: pink;
        }
        .box2 {
            width: 100px;
            height: 200px;
            border-radius: 0 100px 0 100px/0 200px 0 200px;
            border: 1px solid green;
        }
       .box3 {
           width: 200px;
           height: 100px;
           border-radius: 50%;
           background-color: pink;
       }
       .box4 {
           width: 100px;
           height: 200px;
           border: 1px solid green;
           border-radius: 50%;
       }
       .box5 {
           width: 100px;
           height: 200px;
           background-color: pink;
           border-top-left-radius: 100px;
       }
       .box6 {
           width: 200px;
           height: 100px;
           border: 1px solid green;
           border-bottom-right-radius: 100px;
       }
       .box7 {
           width: 300px;
           height: 100px;
           border-radius: 50px;
           background-color: pink;
       }
       .box8 {
           width: 100px;
           height: 300px;
           border-radius: 50px;
           border: 1px solid green;
       }
       .box9 {
           width: 300px;
           height: 100px;
           border-radius: 100px /50px;
           background-color: pink;
       }
       .box10 {
           width: 100px;
           height: 300px;
           border: 1px solid green;
           border-radius: 50px /100px;

       }
       .box11 {
           width: 300px;
           height: 100px;
           background-color: pink;
           border-radius: 20px /50px;
       }
       .box12 {
           width: 100px;
           height: 300px;
           border-radius: 50px/20px;
           border: 1px solid green;
       }
       .box13 {
           width: 200px;
           height: 100px;
           border-top-left-radius: 100px;
           border-top-right-radius: 100px;
           background-color: pink;
       }
       .box14 {
           width: 100px;
           height: 200px;
           border-top-right-radius: 100px;
           border-bottom-right-radius: 100px;
           border: 1px solid green;
       }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4 "></div>
    <div class="box5 "></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
    <div class="box10"></div>
    <div class="box11"></div>
    <div class="box12"></div>
    <div class="box13"></div>
    <div class="box14"></div>
</body>
</html>

写在最后

大家可以自己画一些图形，然后用css表示出来，一定要多动手练习鸭！
觉得有用可以点个赞哟，还有哪里不清楚欢迎大家留言评论。

原文链接：https://blog.csdn.net/wh13821662259/article/details/106340048