边框圆角的作用:将原始的直角变为圆角
格式:
border-radius:100px 0px 0px 0px;
第一个参数:指定左上角的半径
按照左上/右上/右下/左下的顺序
border-radius:0px 0px 0px 100px;
如果省略一个参数, 会变成对角的值
border-radius:100px 80px 40px;
如果省略两个参数, 会变成对角的值
border-radius:100px 80px;
如果省略三个参数, 其它角会和它一样
border-radius:100px;
如果指定的半径是当前元素宽高的一半, 那么就是一个圆形
border-radius:100px;
单独指定某一个角的半径
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
如果传递了两个参数, 那么第一个参数代表水平方向的半径, 第二个参数代表垂直方向的半径
border-top-left-radius:100px 50px;
border-top-right-radius:100px 50px;
border-bottom-left-radius:100px 50px;
border-bottom-right-radius:100px 50px;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
斜杠之前的代表左上/右上/右下/左下的水平方向的半径
斜杠之后的代表左上/右上/右下/左下的垂直方向的半径
border-radius:100px 100px 100px 100px/50px 50px 50px 50px;
border-radius:100px/50px;
width:200px;
height:200px;
/*规律: 如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角
*/
border:110px solid #000;
margin:100px auto;
border-radius:110px;
