7. 圆角属性

圆角属性 border-radius

.box {
       width: 100px;
       height: 100px;
       background-color: pink;
       /* 四个角都是8px的圆角 */
       border-radius: 8px;
       /* 左上角和右下角是4px, 右上角和左下角是8px */
       border-radius: 4px  8px;
       /* 左上角10px,右上角和左下角是20px,右下角是30px */
       border-radius: 10px 20px 30px;
       /* 左上角10px,右上角20px,右下角是30px,左下角是40px */
       border-radius: 10px 20px 30px 40px;
       /* 了解即可: 创建一个椭圆角  代表水平直径/垂直直径 */
       border-radius: 10px/20px;
       /* 创建一个圆形 */
       border-radius: 50%;
     }

圆形

.box {
       width: 100px;
       height: 100px;
       background-color: pink;
       /* 圆形 */
       border-radius: 50%;
     }

椭圆形

.box {
       width: 100px;
       height: 400px;
       background-color: pink;
       /* 椭圆 */
       border-radius: 50%;
     }

圆角弧度

.box {
       width: 400px;
       height: 50px;
       background-color: pink;
       /* 设置圆角属性为高度的一半 */
       border-radius: 25px;
     }

扇形

        .container {
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }

        .box {
            float: left;
            width: 200px;
            height: 200px;
        }

        .box:nth-child(1) {
            background-color: hsl(120, 50%, 50%);
            border-radius: 0 200px 0 200px;
        }

        .box:nth-child(2) {
            background-color: hsl(240, 50%, 50%);
            border-radius: 200px 0 200px 0;
        }

        .box:nth-child(3) {
            background-color: hsl(360, 50%, 50%);
            border-radius: 200px 0 200px 0;
        }

        .box:nth-child(4) {
            background-color: hsl(100, 20%, 50%);
            border-radius: 0 200px 0 200px;
        }

<div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>