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. CSS3 滤镜（filter）
filter CSS属性将模糊或颜色偏移等图像效果应用于元素
filter：函数( ); 例如：filter:blur( 5px ); blur 模糊处理，数值越大越模糊
3. CSS3 calc 函数
calc( ) 在声明CSS属性值时执行一些计算
width：calc(100% - 30px); // 宽度永远比父盒子（本身）小 30 像素
括号里面可以使用 + - * / 来计算
4. CSS3 过渡（重点）
transition：要过渡的属性 花费时间 运动曲线 何时开始；
属性：想要变化的 CSS 属性，宽度，高度，背景颜色，内外边距都可以，如果想要所有属性都变化过渡，写一个 all 就可以
花费时间：单位是 秒（s）必须写单位 例如：0.5s
运动曲线：默认是 ease（可以省略），linear（匀速），ease-in( 加速 ，ease-out(减速)，ease-in-out(先加速后减速)
过渡使用口诀：谁做过渡给谁加（经常搭配 :hover 使用）
原文地址：https://www.cnblogs.com/qtbb/p/11738461.html