点击刷新
border-radius [ˈbɔrdə(r)] - [ˈrediəs]
英文示意：
border：边界，国界，边疆
radius：半径，范围
定义：
复合写法：
border-radius: [ length | % ] (可以设置宽度／百分比);
border-radius: [ length | % ]{1,4} (四个角：左上，右上，右下，左下 即顺时针方向);
border-radius: [ length | % ]{1,4} / [ length | % ]{1,4}(水平方向／垂直方向);
拆分写法：
border-垂直方向-水平方向-radius: 水平半径,垂直半径
border-top-left-radius: [ length | % ]{1,2} (左上角，第一参数代表水平半径，第二个参数代表垂直半径，若第二个参数省略，默认等于第一个参数);
border-top-right-radius: [ length | % ]{1,2} (右上角)
border-bottom-left-radius: [ length | % ]{1,2} (左下角)
border-bottom-right-radius: [ length | % ]{1,2} (右下角)
名词解释：
半径：边角距离圆切点的距离
百分比：宽度高度，边框，内边距的和作为基准值
特性：
任意相邻圆角的半径和大于边框长度时，会按照比例减少半径值，直到他们不会被重叠
任意圆角的水平半径和垂直半径比例恒定不变（水平半径过长，超过边框长度时，会将水平半径缩小，对应会按照比例减少垂直半径的长度）
示例：
四边顶角，半径均为长宽的一半，显示为标准圆形;
height: 100px;
width: 100px;
border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;
左侧顶角，水平方向半径20px，垂直方向半径50px;
height: 100px;
width: 100px;
border-radius:20px 50px 0 0 / 50px 50px 0 0;
异形，说明水平垂直比例缩放
height: 100px;
width: 100px;
border-radius:200px 0 0 0 / 50px 0 0 0;
左侧顶角，水平方向半径200px，垂直方向半径50px;
由于水平半径长度大于100px，会将水平半径缩短为100px，又因为水平与垂直半径比例不变
当前水平半径输入值是垂直半径输入值的4倍，而水平真实半径为100px，所以垂直真实半径缩短为25px;
半椭圆
height: 50px;
width: 100px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;
四分之一椭圆
height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;
四分之一椭圆，加上边框的效果示意:
border-left: 5px solid #5e77bf;
background-color: transparent;
border-top: 5px solid #5e77bf;
background-color: transparent;
同心圆的实现:
height: 100px;
width: 100px;
border-radius:50%;
border-top: 5px solid #5e77bf;
background-color: transparent;
© 著作权归作者所有
举报
发表评论
0/200
