圆角、怪异盒模型

圆角

可以设置像素以及百分比。

分开写法：

设置左上角： border-top-left-radius
设置右上角：border-top-right-radius
设置右下角：border-bottom-right-radius
设置左下角：border-bottom-left-radius
可以设置两个值：
例如： border-top-left-radius: x y;
x代表左上角X轴偏移量，y代表左上角Y轴偏移量。

复合写法：border-radius

• border-radius: 50%;一个值得情况，表示左上角，右上角，右下角，左下角都是这个值；
• border-radius: 50% 50%;两个值的情况，第一个表示左上角和右下角，第二个值表示右上角和左下角；
• border-radius: 20px 50% 30px;三个值的情况，第一值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角；
• border-radius: 20px 20px 30px 10px; 四个值的情况，第一个值表示左上角，第二个值表示右上角，第三个值表示右下角，第四个值表示左下角。
• border-radius: 20px 20px 30px 10px / 10px 20px 30px 10px; 代表border-radius：四个方向的X轴偏移 / 四个方向的宇宙偏移量；

怪异盒模型

box-sizing: content-box;
保持内容尺寸，类似标准盒模型
box-sizing: border-box;
怪异盒模型，border与padding不会影响盒子的尺寸，但会影响内容尺寸