CSS基础 表框圆角的基本使用和案例

属性：border-radius:数字+px；
   用途：修饰盒子圆角
使用语法格式：
       1. border-radius：20px ； /* 四个叫同时以半径20px圆角*/
       2. border-radius: 20px 30px /*左上角和右下角同时以半径20px圆角;右上角和左下角同时以半径30px圆角*/
       3. border-radius：20px 30px 40px /*同理，顺序：左上角---> 右上角 --->右下角 ---> 左下角，没有设置则取对角值*/

使用场景1：
      正圆图形
     

 

html结构代码：
       <div></div>
CSS结构代码：
     div{
            width: 300px;   /*先正方，在圆角*/
            height: 300px;
            background-color: orange;
            border-radius: 50%;
        }

使用场景二：胶囊按钮

html 结构代码：
    <div></div>

CSS结构代码:
        div{
            width: 300px;    /*先长方形，在根据高度的一半设置圆角*/
            height: 100px;
            background-color: orange;
            border-radius: 50px;
        }