扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“css3中设置圆角边框的样式有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css3中设置圆角边框的样式有哪些”这篇文章吧。
创新互联公司，专注为中小企业提供官网建设、营销型网站制作、自适应网站建设、展示型做网站、成都做网站等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。
样式为：1、“border-radius:半径值;”；2、“border-radius:半径值 半径值;”；3、“border-radius:半径值 半径值 半径值;”；4、“border-radius:半径值 半径值 半径值 半径值;”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、border-radius属性简介
为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）
二、border-radius定义方法
border-radius属性有两种定义方法：border-radius可以一次性对四个角设置相同的值(简写属性)，也可对4个角分别设置圆角样式(单独属设性置)。
（一）单独属性设置
border-radius：同时设置四个边框的圆角样式；
border-top-left-radius：设置左上角边框的圆角样式；
border-top-right-radius：设置右上角边框的圆角样式；
border-bottom-left-radius：设置左下角边框的圆角样式；
border-bottom-right-radius：设置右下角边框的圆角样式；
注意【边框的顺序不能打乱，比如border-top-left-radius就不可以写成border-left-top-radius 属性是固定的。】
通过实际操作可以看出二者表达效果是相同的。
（二）简写属性
为border-radius设置四个参数,要注意顺序关系
1、为属性只设置一个值，四个边框的圆角都采用相同的值
border-radius：20px //四个边框圆角为20px
2、为属性设置两个值，第一个值设置左上角和右下角，第二个值设置右上角和左下角
border-radius: 20px 50px //左上角和右下角20px，右上角和左下角50px
3、为属性设置三个值，第一个值设置给左上角，第二个值设置给右上角和左下角，第三个值设置给右下角
border-radius: 20px 50px 5px //左上角20px，右上角和左下角50px，右下角5px
4、为属性设置四个值，第一个值设置给左上角，第二个值设置给右上角，第三个值右下角，第四个值左下角（按照顺时针方向）
border-radius: 20px 50px 5px 100px //左上角20px，右下角50px，右下角5px ，左下角100px
三、分别设置水平半径和垂直半径
border-radius的语法
border-radius: {1-4} length /% / {1-4} length /%;
border-radius: 20px 10px 40px / 25px 30px
length 定义圆角的形状；% 以百分比定义圆角的形状；{1-4} border-radius的参数个数范围为1~4个
注释【按此顺序设置每个 radii(半径)的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
border-radius的参数个数范围为1~4个，这里要注意水平半径和垂直半径的分别使用时：在border-radius中先设置4个边角的水平半径再设置4个边角的垂直半径。】
实例：
div{border-radius: 20px 5px 100px/15px 30px;}等价于
div{ border-top-left-radius: 20px 15px;
border-top-right-radius: 5px 30px;
border-bottom-right-radius: 100px 15px;
border-bottom-left-radius: 5px 30px;
}表达效果
四、应用
使用border-radius创建圆形
输入border-radius：r，这里的r元素的半径大小（有长度单位），要创建圆形应设置r的值为元素高度和宽度的一半。
当元素的高度和宽度相等时，这种取值方法就是圆形。
代码