回顾一点：谈到什么东西，立马进入那个状态，这个很重要！！！

圆角，顾名思义，就是矩形盒子的四个角落。所以有

border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius

理解需要注意的地方：

语法：

border-top-left-radius: h-radius v-radius;

1、取值：

value: [<length> | <percentage>]{1,2}

2、percentage:

       
这个百分比的就算，相对于边框盒子border-box，h-radius相对于border-box 的 width， v-radius相对于border-box 的 height。负值不允许

3、简写：border-radius

       
遵循规则： 上、右、下、左

border-radius: top-left top-right bottom-right bottom-left;

       
有斜线的一种写法：斜线前面设置水平圆角，斜线后面设置的是竖直圆角

border-radius: 2em 1em 4em / 0.5em

4、几个概念的理解：

border edge radius      //边框外边缘圆角

padding edge radius     //内边距外边缘圆角

content edge radius     //内容外边缘圆角

       
这几个的计算，都遵循：border-radius减去各个厚度，就是产生的各个圆角

5、几个效果的理解：

<1>边框厚度不一致，圆角会平稳地过渡corner shaping

.box {
    width: 200px;
    height: 200px;
    border-color: pink;
    border-style: solid solid none none;
    border-top-width: 100px;
    /*这是关键：边框宽度不一*/
    border-right-width: 0px;
    border-radius: 200px;
    /*但是圆角效果依旧，所以平稳过渡*/
}