<!--/*設定盒模型*/-->

<!--content-box:你設定的width屬性值僅僅是內容的寬度，
        盒子的最終的寬高值在width的基礎上再加上padding和border的寬度*/-->

<!--border-box:你設定的width屬性值就是盒子的最終的寬度，
        包含了border和padding和內容。如果添加了padding和border,
        那麼真正放置內容的區域會減小&#45;&#45;但是它可以穩固頁面的結構*/-->

<!--box-sizing: border-box;-->

/*新增邊框圓角*/
    /*1.設定一個值：四個角的圓角值都一樣*/
    /*border-radius: 10px;*/
    /*2.設定兩個值:第一個值控制左上/右下，第二個值控制右上/左下*/
    /*border-radius: 10px 30px;*/
    /*3.設定三個值：第一個值控制左上，第二值控制右上/左下，第三個值控制右下*/
    /*border-radius: 10px 40px 60px;*/
    /*4.設定四個值：左上  右上 右下 左下*/
    /*border-radius: 10px 30px 60px 100px;*/

    /*新增/是用來設定當前個不同方向的半徑值  水平x方向/垂直y方向*/
    /*border-radius: 100px/50px;*/

    /*新增某個角點的圓角*/
    /*border-radius: 0px 50px 0px 0px;*/
    /*border-上下-左右-radius:*/
    /*border-top-right-radius: 100px;
    border-top-left-radius: 100px;*/
    /*border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;*/

    /*設定某個角點的兩個方向上的不同圓角*/
    /*border-top-right-radius: 100px 50px;
    border-bottom-left-radius: 80px 40px;
    border-bottom-right-radius: 60px 30px;
    border-top-left-radius: 40px 20px;*/
    /*如果想設定四個角點的不同方向上的不同圓角值*/
    /*分別是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
    border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;