1. 圆角边框
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用
2. 盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：
box-shadow: h-shadow v-shadow blur spread color inset;
3. 文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。 语法： text-shadow: h-shadow v-shadow blur color;
4. 图标变模糊 -- CSS3滤镜filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法：filter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊
5. 计算盒子宽度 -- calc 函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算
语法：
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算
6. CSS3 过渡（★★★）
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s
- 运动曲线： 默认是 ease （可以省略）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
- 后面两个属性可以省略
- 记住过渡的使用口诀： 谁做过渡给谁加
