8-6.圆角边框设置
圆角边框设置:
圆角边框的两大要素:方向和半径
书写格式:border-垂直方向(上下)-水平方向(左右)-radius:水平方向的半径,垂直方向的半径;
圆角的方向:
注意:圆角的方向选择的是先上下,再左右
1.border-top-left-radius 表示选中的是上左角,默认值
2.border-top-right-radius 表示选中的是上右角
3.border-bottom-right-radius 表示选中的是下右角
4.border-bottom-left-radius 表示选中的是下左角
圆角的半径:
1.值1 表示的是水平方向的半径
2.值2 表示的是垂直方向的半径
3.圆角的半径可以使用合法的尺寸单位:px em rem 百分比...
4.当设置成一个值时,另一个值和设置的值一样大小
5.当使用百分比设置时,半径的值是元素宽度或者高度的百分比
圆角的简写:同时设置四个圆角边框
1.border-radius:值1 值2 值3 值4;
2.四个值依次从上左角 上右角 下右角 下左角 顺时针排列
3.四个角是对角的关系:设置三个值时,值1(上左角) 值2(上右角和下左角) 值3(下右角)
设置两个值时,值1(上左角和下右角) 值2(上右角和下左角)
设置一个值时,四个方向设置同样大小的圆角
设置成50%时,元素的边框变成圆形或者椭圆
posted on 2021-11-21 19:53 Walker-Yang 阅读(452) 评论(0) 编辑 收藏 举报