CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

1.盒子模型（box-sizing）

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可分为两种情况：

　1. box-sizing：content-box   盒子大小为 width + padding + border（默认）

　2. box-sizing：border-box     盒子大小为 width

　如果盒子模型我们改为了 box-sizing：border-box，那么 padding 和 border 就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

2. 背景线性渐变

　语法：

　　background：linear-gradient（起始方向，颜色1，颜色2，....）；

　　background：-webkit-linear-gradient（left，red，blue）；

　　background：-webkit-linear-gradient（left  top，red，blue）；

　背景渐变必须添加浏览器私有前缀（兼容性差）

　起始方向可以是：方位名词  或者  度数，如果省略默认是 top

3. CSS3 滤镜（filter）

　filter CSS属性将模糊或颜色偏移等图像效果应用于元素

　filter：函数( );   例如：filter:blur( 5px );   blur 模糊处理，数值越大越模糊

4. CSS3 calc 函数

　calc( ) 在声明CSS属性值时执行一些计算

　width：calc(100% - 30px);   // 宽度永远比父盒子（本身）小 30 像素

　括号里面可以使用 +  -  *  /   来计算

5. CSS3 过渡（重点）

　transition：要过渡的属性  花费时间  运动曲线   何时开始；

　属性：想要变化的 CSS 属性，宽度，高度，背景颜色，内外边距都可以，如果想要所有属性都变化过渡，写一个 all 就可以

　花费时间：单位是 秒（s）必须写单位   例如：0.5s

　运动曲线：默认是 ease（可以省略），linear（匀速），ease-in( 加速 ，ease-out(减速)，ease-in-out(先加速后减速)

　过渡使用口诀：谁做过渡给谁加（经常搭配 :hover 使用）