CSS3盒子模型

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

可以分成2中情况：

1. box-sizing:content-box 盒子大小为width+padding+border（以前默认的）

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

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

CSS3的其它特性

1. 图片变模糊

2. 计算盒子宽度width:calc函数

CSS3滤镜filter

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

代码演示：

CSS3 calc函数

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

CSS3过渡

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

过渡动画：是从这一种状态逐渐的过渡到另一种状态。

可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持，但是不会影响页面布局。

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

代码演示：

进度条的案例联系

广义的HTML5

1.广义的HTML5是HTML5本身+CSS3+javascript。