在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角

用法：

/* 只設(shè)置一個(gè)角的寫法 */
border-top-left-radius: 20px; //設(shè)置左上角
border-top-right-radius: 20px; //設(shè)置右上角
border-bottom-left-radius: 20px; //設(shè)置左下角
border-bottom-right-radius: 20px; //設(shè)置左下角

/* 同時(shí)設(shè)置四個(gè)角 */
/* 順序是 左上-右上-右下-左下 */
border-radius: 20px 10px 10px 20px;

/* 四個(gè)角設(shè)置統(tǒng)一值可以只寫一次 */
border-radius: 20px; 

/* 設(shè)置兩個(gè)值 */
/* 第一個(gè)值控制左上和右下兩個(gè)角，第二個(gè)值控制右上和左下兩個(gè)角 */
border-radius: 20px 10px;

/* 設(shè)置三個(gè)值*/
/* 第一個(gè)值控制左上角，第二個(gè)值控制右上和左下兩個(gè)角，第三個(gè)值控制右下角 */
border-radius: 20px 10px 20px;

/* 除了用固定值還可以用百分比 */
border-radius: 50%;

除了上面的方法，還有一種設(shè)置方法

border-redius:100px/50px;

這種寫法表示用一個(gè)水平半徑為100px，垂直半徑為50px的橢圓來切割border
栗子：

.div{
  width:400px;
  height:200px;
  background: #f55;
  border-radius: 100px/50px;
}

作用原理：用一個(gè)水平寬為200px，垂直高為100px的橢圓去貼著左上角，左上角多出來（藍(lán)色線區(qū)域）的地方就會(huì)被切去

四個(gè)角都被切掉后，變成下面這樣

我們可以使用這個(gè)方法來設(shè)置橢圓

還是上面這個(gè)寬400px，高200px的矩形，設(shè)置border-radius:200px/100px；即可得到一個(gè)橢圓

百分比設(shè)置原理：

border-radius: 50%;
border-radius: 50%/50%;

兩種寫法效果是一樣的，上面說到的”/”前面的一個(gè)值是橢圓的水平半徑，后面的值是橢圓的垂直半徑，所以前面的水平半徑是相對(duì)寬度的，后面的垂直半徑是相對(duì)高度的。（注意是半徑）
栗子：

.div{
  width: 200px;
  height: 100px;
  border-radius :25%/50%;
  background-color: brown;
}

效果圖如下：