【40】CSS3 （3）——新增常用属性①边框圆角

边框圆角属性目录：

---

一、介绍

边框圆角	具体含义
属性名	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）——新增常用属性②文字阴影