盒子模型补充

1.box-sizing

简而言之，盒子模型是是由（margin-padding-border-盒子宽高）组成的，其中我们可见的盒子样式是不包含margin的；

而box-sizing的作用是用来设置盒子尺寸的计算方式（设置width和height的作用） 

举一个简单的例子：

可以看到该盒子的大小为160*160 这里指的是默认的：content-box默认值，宽度和高度用来设置内容区的大小

如果加上

 box-sizing: content-box;

此时盒子向内凹陷；这是侯width和height的值就是盒子的大小而border是向内延申的。

2.Outline用法

它的定义和border差不多只是它不影响可见框的大小既是下面的字体会被阻挡

3.box-shadow用法

       它的四个值分别定义不同的概念

 box-shadow:20px 0px 0px red;

                第一个值定义水平偏移及阴影会向右边移动

                第二个定义垂直则会向下方移动

                

                        第三个定义模糊值，值越高越模糊

                

                        第四个显而易见就是颜色

4.boder-radius 

border-radius属性使一个元素的外边框边缘的角变圆；

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

border-radius 可以分别指定四个角的圆角

• 四个值：左上 右上 右下 左下
• 三个值：左上 右上/左下 右下
• 两个值：左上/右下 右上/左下
• 一个值：左上/右上/右下/左下

                       

其画⚪的方法以20px的原为例子就是这样的

 border-top-left-radius: 20px;

        

而椭圆则是

只需要对上述样式对一点点的改动，设置width和height属性不相等即可

    border-top-left-radius: 10px 20px;

画⚪：50%

border-radius: 50%;