border-radius该如何去设置以及怪异盒模型

大家都知道border-radius使用来设置边角的但是如何去设置呢，下面我会一一介绍

border-radius可以统一对他们来设置：

1.当border-radius只有一个值时，如border-radius：20px;说明左上，右上，右下，左下四个方位都有偏移量

2.有两个值时，如border-radius: 50% 50%；第一个值表示左上 右下  第二个值表示右上 左下

3.三个值 第一个值表示左上，第二个值表示 右上和左下，第三个值表示右下

4.四个值 分别代表左上，右上，右下，左下

5.border-radius: 四个方向的x偏移/四个方向的y轴偏移border-radius: 20px 20px 20px 20px/10px 20px 20px 20px

也可以对他们单独设置：

1.border-top-left-radius 设置左上角

2.border-top-right-radius 设置右上角

3.border-bottom-left-radius 设置左下角

4.border-bottom-right-radius 设置右下角

5.border-top-left-radius: x y; x代表左上角x轴偏移量，y代表左上角y轴的偏移量，可以设置像素以及百分比

怪异盒模型

content-box = 保持内容尺寸，类似标准盒模型

border-box = 怪异盒模型 border与padding不会影响盒子的尺寸，但会影响内容尺寸