写在前面的

---

在很久之前，实现圆角的方式可能使用背景图片，也有使用一条条边框；自从 CSS3 的新属性：圆角边框 border-radius出现后，一切变得简单。

简介

---

在 w3c 上有介绍说，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性 ，分别是以下组成：
左上圆角半径：border-top-left-radius，
右上圆角半径：border-top-right-radius，
右下圆角半径：border-bottom-right-radius，
左下圆角半径：border-bottom-left-radius

Title	Value
默认值	0
继承性	no
版本	CSS3
JavaScript语法	object.style.borderRadius="5px"

用法

---

• 属性值个数为 4 ；
  border-radius: 40px 30px 20px 10px;
  分别代表：左上角、右上角、右下角、左下角(顺时针方向)
  

  

• 属性值个数为 3 ；
  border-radius: 40px 20px 10px;
  第一个值表示左上角，第二个值表示右上角和左下角(对角)，第三个值表示右下角
  

  

• 属性值个数为 2 ；
  border-radius: 40px 10px;
  第一个值表示左上角和右下角(对角)，第二个值表示右上角和左下角(对角)
  

  

• 属性值个数为 1 ；
  border-radius: 40px;
  它表示该元素的四个方向的圆角大小都是一样的。
  

---

在上述用法中，每个圆角的“水平半径”与“垂直半径”都是相同的，当然也可以分别设置。

border-radius: 40px/10px;
第一组值表示“水平半径”，第二组值表示“垂直半径”，每组值同时可以设置 1 个到 4 个值，规则与之前相同。

通过画一个🥚来帮助更好的理解把！
border-radius: 75px 75px 75px 75px/125px 125px 75px 75px;

常用实例

---

实心圆

 width: 200px;
 height: 200px;
 background: #53A600;
 border-radius: 100%;

半圆

 width: 100px;
 height: 200px;
 background: #53A600;
 border-radius: 100px 0 0 100px;

扇形

 width: 100px;
 height: 100px;
 background: #53A600;
 border-radius: 0 0 0 100px;

椭圆

 width: 200px;
 height: 100px;
 background: #53A600;
 border-radius: 100px/50px;