CSS盒子模型-圆角边框

CSS3中新增了圆角边框样式，可以将盒子变为圆角。

• border-radius
  用于设置元素的外边框圆角。

语法：
border-radius:length;

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%/
• 如果是个矩形，将length设置为高度的一半就可以做一个圆角矩形
• 该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

例：

  .yuanxing{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*border-radius: 100px;*/
            /*设置为50%的意思就是宽度的一半*/
            border-radius: 50%;
        }
        .juxing{
            width: 400px;
            height: 200px;
            background-color: pink;
            /*圆角矩形设置为高度的一半*/
            border-radius: 100px;
        }
        .radius{
            width: 400px;
            height: 200px;
            background-color: pink;
            /*设置的顺序为左上,右上,右下,左下,顺时针*/
            /*border-radius: 10px 30px 50px 100px;*/
            /*也可以跟两个值*/
            /*border-radius: 50px 100px;*/
            /*也可以跟三个值*/
            /*border-radius: 10px 100px 50px;*/
            /*还可以分开写*/
            border-top-left-radius: 10px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 100px;
            /*需要记住的是先top/bottom,再left/right*/
        }

radius(半径）圆角原理：设置一个length半径大小的圆与盒子相交，保留相交后的圆角。