如何制作圆角

一、核心属性： border-radius

1. 普通矩形圆角（方块切圆角）

语法： border-radius: 数值; 
数值越大，圆角越圆润，单位  px

点击查看代码

/* 四个角统一 10px 圆角 */
.box {
  border-radius: 10px;
}

/* 四个角分别设置：左上 右上 右下 左下 */
.box {
  border-radius: 10px 20px 5px 15px;
}

/* 只单独设置某一个角 */
.box {
  border-top-left-radius: 15px;    /* 左上角 */
  border-top-right-radius: 15px;   /* 右上角 */
}

2. 做成正圆形（你数字圆圈用的）

前提：元素宽高必须相等，再写  border-radius: 50%

点击查看代码

.num {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%; /* 宽高一致，50%直接变正圆 */
  /* 文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

- 如果宽高不一样， border-radius:50%  只会变成椭圆，不是正圆

3. 半圆/胶囊长条圆角

长条盒子直接给超大圆角，等于胶囊：

点击查看代码

.long-box {
  width: 200px;
  height: 50px;
  border-radius: 999px; /* 数值大于高度一半就是胶囊 */
}