你一定要知道的几个css3新特性

height: 200px;

}

由图可以看到，当我去掉box- sizing : border - box ; 后，盒子宽高会变成210px,加上了padding 和 border。

css3 滤镜filter(可做图片模糊处理)

---

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

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

（目前记住blur()这个函数就行）

示例

可以看到图片变模糊了。

css3 calc函数

---

css3 calc 函数：

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

width :calc(100%-80px);

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

示例

有两个盒子，不管父盒子宽度怎么变化，让子盒子宽度永远比父盒子小30px。

由上图可以看到，子盒子宽度会随父盒子宽度一同变化。

css3 过渡(transition) (重要)

---

过渡（ transition ）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态，可以让我们们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 : hover 一起搭配使用。

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

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

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

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

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

运动曲线

过渡使用口诀：谁做过渡给谁加

示例

案例-进度条