一.文本阴影
text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
text-shadow: h-shadow v-shadow blur color;
二. 字体定义
定义字体
@font-face{
font-family：字体名称；
src：url（字体路径）；
}
使用字体
选择器{
font-family：字体名称；
}
三.边框阴影
使用box-shadow属性为边框添加阴影
语法 box-shadow: h-shadow v-shadow blur spread color inset;
四.圆角边框
border-radius 属性用于向元素添加圆角边框
1.border-radius: 20px; // 4个边框圆角样式都为20px
2.border-radius: 20px 40px; // 左上角和右下角：20px；右上角和左下角：40px
3.border-radius:20px 40px 60px; // 左上角：20px；右上角和左下角：40px；右下角：60px
4.border-radius:20px 40px 60px 80px; // 左上角：20px；右上角：40px；右下角：60px；左下角：80px
五.渐变
1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
angle: left,right,top,buttom,30deg to left to top left
repeating-linear-gradient 重复渐变 未到100%
2.径向渐变（Radial Gradients）- 由它们的中心定义
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
background-image：radial-gradient(shape size at position，颜色1 颜色1位置，颜色2 颜色2位置，....)
shape 形状：
ellipse 默认 椭圆
circle 圆形
size 大小：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
position 圆心位置：
at x y
x y取值
英文单词 left right center top bottom
数值+单位
百分比
六 .渐进增强和优雅降级的区别
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
前者是优先考虑低版本，由低版本向高版本递进；后者是针对最高级的浏览器来设置后再考虑低版本浏览器的兼容问题
七.过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
1.指定要添加效果的CSS
2.属性指定效果的持续时间。
语法：
过渡：
transition-property
过渡属性：
多个属性名间有逗号隔开
过度持续时间：
transition-duration
单位：s秒或ms毫秒
延迟过渡效果：
transition-delay 属性规定过渡效果的延迟（以秒计）。
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
- ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
- linear - 规定从开始到结束具有相同速度的过渡效果
- ease-in -规定缓慢开始的过渡效果
- ease-out - 规定缓慢结束的过渡效果
- ease-in-out - 规定开始和结束较慢的过渡效果
- cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
（鼠标放在div上的效果）
