圆角
可以设置像素以及百分比。
分开写法:
设置左上角: 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不会影响盒子的尺寸,但会影响内容尺寸