大家都知道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不会影响盒子的尺寸,但会影响内容尺寸