CSS 中使用 border-radius 属性为元素设置圆角边框，可指定一个或四个长度值，分别表示四个角的圆角程度：一个值：适用于所有角。两个值：水平和垂直半径，适用于所有角。三个值：左上、右上和右下角。四个值：左上、右上、右下和左下角。
CSS 圆角边框设置
在 CSS 中，可以使用 border-radius 属性为元素设置圆角边框。border-radius 属性值是一个或四个长度值，分别表示元素四个角的圆角程度：
一个值：应用相同的圆角半径到所有四个角。两个值：水平半径和垂直半径，应用于所有四个角。三个值：左上、右上和右下角的半径。四个值：分别应用于左上、右上、右下和左下角。
语法：
border-radius: | | inherit;
示例：
立即学习“前端免费学习笔记（深入）”；
圆角矩形
.rounded-rectangle { border-radius: 10px; /* 所有角半径为 10px */}
椭圆形按钮
.oval-button { border-radius: 50%; /* 所有角半径为 50%，即形成一个圆形 */}
不同角的圆角半径
/* 左上、右上、右下、左下角半径分别为 10px、20px、30px、40px */.different-radii { border-radius: 10px 20px 30px 40px;}
注意：**
圆角半径不能大于元素的宽度或高度一半。inherit 值可继承父元素的圆角半径设置。
以上就是css边框圆角怎么设置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629357.html
微信扫一扫 
支付宝扫一扫 
