要把物件边角变得圆圆润润的，首先都会想到border-radius

初学者刚会用的时候只会设定一个值
让物件变成一个圆形

然後就觉得好厉害发现新大陆(呦齁齁~手舞足蹈狂奔۹(⊙ꇴ⊙)۹)

但後来发现浅啦!!太浅啦!!!

这个属性能做的不仅仅如此阿，它可以让物件千变万化，潜力无穷!

究竟要怎麽使用呢?

今天就来介绍神奇的border-radius~

border-radius

跟border一样，border-radius其实是一个缩写
集合了左上、右上、右下、左下

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

所以在设定时

/* 设定一个值 */
border-radius: 四角;

/* 设定两个值  */
border-radius: [左上 右下] [右上 左下];

/* 设定三个值 */
border-radius: 左上 [右上 左下] 右下;

/* 设定四个值 */
border-radius: 左上 右上 右下 左下;

就可以让物件产生不同的形状~

理解原理

它之所以能让物件变得圆圆润润，是因为圆弧的部分是圆或是椭圆的一部分
因此当我设定border-radius:10px;时，就是设定了半径10px的圆型，取其圆弧部分套用到四个角

设定1到4个值时，我们设定就是"圆的半径"
这种方式产生的边角圆弧都是对称的

但刚刚也有提到，它的圆弧部分也可以是"椭圆"的一部分
那要怎麽变成椭圆形的一部分呢~
开始之前要先回溯来看看它所缩写的四个属性
我以border-top-left-radius为例子

/* 设定一个值 */
border-top-left-radius: 10px;
/* 设定两个值 */
border-top-left-radius: 50px 10px;

当我设定两个值时，第一个值为横向半径、第二个值为纵向半径
透过设定这两个值就可以产生椭圆形的圆弧啦~

但假如说我要四个角都想设定不同椭圆的话...难道
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
都分开设定一轮吗!? (当然这样子设定比较方便看懂)

灯灯~ 其实border-radius有一个写法就可以这样设定罗~
让我们加上/进去!
套用刚刚设定1~4个值的概念

/* 一个值 */
border-radius: 横向半径 / 纵向半径;
 
/* 两个值 */ 
               /*-----横向半径---------/---纵向半径----*/ 
border-radius: [左上 右下] [右上 左下] / [左上 右下] [右上 左下];

/* 三个值 */
              /*-----横向半径--------/-----纵向半径-----*/ 
border-radius: 左上 [右上 左下] 右下 / [左上 右下] [右下 左上];

/* 四个值 */						
             /*-----横向半径-------/-----纵向半径-----*/
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下;

/* 一起设定 */
             /*-----横向半径---/---纵向半径--*/
border-radius: 0 100% 100% 0 / 50%;

就可以玩出各种不同的形状喔XD

codepen实作

用border-radius 画半圆

理解之後就来考考自己了~
除了用conic-gradient()之外，如果要画一个半圆该怎麽写呢?

.思考一秒钟
..思考两秒钟
...思考三秒钟

直接看解答：

  width: 200px;
  height: 400px;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #faa;

瞧!画出来了呢~~

再有创意一点
做出半圆之後结合transform:rotate()、z-index层次
这样就可以画出不同比例的圆饼图啦!

codepen实作玩玩看

最後推荐一个好网站
懒得算的时候只要拉一拉就可以产生漂亮的圆弧罗~

https://9elements.github.io/fancy-border-radius/

参考资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius