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等) |