1.3CSS新特性

CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有 2 个值：即可指定为 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 宽度）

CSS3滤镜filter:

filterCSS 属性将模糊或颜色偏移等图形效果应用于元素。

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

CSS3calc函数:

calc() 此 CSS 函数让你在声明 CSS 属性值时执行一些计算 。

width: calc(100% -80px);

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

CSS3 过渡（重点） 记住过渡的使用口诀：谁做过渡给谁加

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

1. 属性 ：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都

变化过渡，写一个 all 就可以。

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

3. 运动曲线： 默认是 ease （可以省略）

4. 何时开始： 单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）