html如何设置顶端圆⾓，前端-CSS边框设置圆⾓今天给⼩伙伴们继续分享CSS相关的知识，这⾥分享⼀下CSS边框设置圆⾓的⽅法。
边框设置圆⾓
1.快速实现⽅法
.box{
/*设置宽度和⾼度 单位px(像素)*/
width: 100px;
height: 100px;
/*边框设置圆⾓*/
border: 4px solid red;
/*设置四个⾓*/
border-radius: 20px;
/*第⼀个参数设置(上左、下右)，第⼆个参数设置(上右、下右)*/
border-radius: 10px 20px;
/*第⼀个参数上左，第⼆个参数设置上右、下左，第三个参数设置下右*/
/*border-radius: 10px 20px 30px;*/
/*四个参数分别代表上左、上右、下右、下左*/
border-radius: 10px 20px 30px 40px;
}
2.单独设置某⼀个⾓
.box{
/*设置宽度和⾼度 单位px(像素)*/
width: 100px;
height: 100px;
/*边框设置圆⾓*/
border: 4px solid red;
/*设置左上⾓*/
border-top-left-radius: 20px;
/*设置右上⾓*/
border-top-right-radius: 20px;
/*设置左下⾓*/
border-bottom-left-radius: 20px;
/*设置右下⾓*/
border-bottom-right-radius: 20px;
}
3.设置圆border radius什么意思
在style⾥⾯的css代码加⼊下⾯这句代码就可以实现圆的效果。需要注意的是，必须是⼀个正⽅形。border-radius: 50%;
4.设置椭圆
在style⾥⾯的css代码加⼊下⾯这句代码就可以实现圆的效果。需要注意的是，必须是⼀个长⽅形。border-radius: 50%;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。