盒模型和圆角

<!--/*设置盒模型*/-->

<!--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;