HTML-CSS：边框圆角

边框圆角的作用:将原始的直角变为圆角

格式:
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;