★文章内容学习来源：拉勾教育大前端就业集训营

边框圆角属性目录：

一、介绍

边框圆角 具体含义
属性名 border-­radius
作用 设置边框的圆角
属性值 有两类，下面具体会讲。但是具体的值都可以是像素值或者百分比（百分比参考的是盒子整体宽度、高度的百分比）
  • 注意：百分比参考的是盒子整体宽度、高度的百分比，这里盒子整体宽度、高度指的是：padding+border+width（height），不包括margin。

二、属性及属性值写法

1.常规情况

属性值 说明
x-radius / y-radius / 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角。（如果两个值一样，得到的是正圆角）
radius 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角。（想得到正圆，则把属性值设置为宽度高度的一半）
1.1举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 104px/52px;  /*前面为水平半径，后面为垂直半径*/
      background-color: pink; 
    }

    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 40% / 20%;  /*与前一个代码效果相同*/
      background-color: pink; 
    }

1.2举例
   .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 130px;  /*一个属性值，则水平和垂直都设置为同一个值，得到的是圆角，且为所有宽度高度的一半，所以得到的是正圆形*/
      background-color: pink; 
    }

   .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
       border-radius:  50%;  /*所有宽度高度的50%,所以是正圆形， 与前一个代码效果相同*/
      background-color: pink; 
    }

2.单一属性

单一属性 （按照角的方向不同进行划分）
border-top-left-radius: 半径; 左上方圆角半径
border-top-right-radius: 半径; 右上方圆角半径
border-bottom-right-radius: 半径; 右下方圆角半径
border-bottom-left-radius: 半径; 左下方圆角半径
2.1举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-top-left-radius: 100px;
      background-color: pink; 
    }

2.2举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-top-right-radius: 100px;
      background-color: pink; 
    }

2.3举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-bottom-right-radius: 100px;
      background-color: pink; 
    }

2.4举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-bottom-left-radius: 100px;
      background-color: pink; 
    }

3. 简写方法

简写方法 border-radius 相当于四个单一属性的简写方法
四值法 border-radius: 左上角 右上角 右下角 左下角;
三值法 border-radius: 左上角 右上角和左下角 右下角;
二值法 border-radius: 左上角和右下角 右上角和左下角;
单值法 border-radius: 四个角相同;
3.1举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 50px  100px  150px  200px; /*四值法*/
      background-color: pink; 
    }

3.2举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 100px  50px 200px; /*三值法*/
      background-color: pink; 
    }

3.3举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 200px  50px;/*二值法*/
      background-color: pink; 
    }

3.4举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 100px; /*单值法*/
      background-color: pink; 
    }

4. 有/ 的属性值写法

/ 的属性值写法 border-radius 属性值中出现了 / 斜线
/ 前面可以设置水平方向四种值的写法
/ 后面可以设置垂直方向四种值的写法
比如 border-radius: 四值法/四值法
border-radius: 四值法/三值法
border-radius: 四值法/二值法
border-radius: 四值法/单值法
…
4.1举例
    .box {
   
      width: 200px;
      height: 200px;
      padding: 30px;
      border-radius: 50% 20% 40% /20% 30% ;
      background-color: pink; 
    }

三、浏览器兼容

• Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

下篇继续：【41】CSS3 （3）——新增常用属性②文字阴影