WEB前端网页设计 HTML CSS 网页设计参数 - 【边框圆角】

border-radius：20px/30px	表示圆角的水平半径的长度为20px，垂直半径的长度为30px
border-radius：20px  25px/30px  35px	表示左上角 水平和垂直半径为20px和30px，右下角  水平和垂直半径为25px和35px
border-radius：40px  50px  60px/70px  80px  90px	表示左上角为40px和70px，右下角和左下角为20px和80px，右下角为60px和90px
border-radius：45px  55px  65px  75px/70px  80px  90px  100px	表示左上角为45px和70px，右上角为55px和80px，右下角为65px和90px，左下角为75px和100px

设置圆角

border-radius：20px/30px 水平半径参数/垂直半径参数 border-radius：20%/30%

表示圆角的水平半径的长度为20px， 垂直半径的长度为30px 表示圆角的水平半径为边框宽度的20%， 垂直半径都为边框高度的30%

单独设置一个圆角的时候只能设置一个值，不然无法生效

左上角	border-top-left-radius
右上角	border-top-right-radius
左下角	border-bottom-left-radius
右下角	border-bottom-right-radius

一个参数：	四个角
两个参数：	左上角、右下角
三个参数	左上角、右下角和左下角、右下角
四个参数	左上角、右上角、右下角、左下角(按顺时针排列)

旋转属性：	transform：rotate（45deg）；	顺时针旋转45°
	transfrom：rotate（-45deg）；	逆时针旋转45°

box-sizing属性：

格式为--->>box-sizing：content-box/border-box

content-box	默认值
border-box	定格width属性设置的长度，不受其他属性影响(padding、margin等)