CSS3浏览器前缀，背景大小，位置，渐变以及过渡效果

CSS3浏览器前缀

-ms-
-ms-box-shadow IE浏览器专属
-moz-
-moz-box-shadow 基于Gecko引擎的浏览器（如Firefox）
-o-
-o-box-shadow Opera浏览器专属
-webkit-
-webkit-box-shadow 基于Webkit引擎的浏览器（如Chrome、Safari）

CSS3优雅降级渐进增强

渐进增强（Progressive
Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3
的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

.transition { /*渐进增强写法 从小到大*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

.transition { /*优雅降级写法 从大到小*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

CSS3背景渐变

linear-gradient(线性渐变)和radial-gradient(径向渐变)：可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）-
由它们的中心定义

线性渐变

至少定义两种颜色结点

语法：
background/background-image:
linear-gradient(2~多个颜色，颜色中间用逗号分隔)
linear-gradient(to方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)
linear-gradient**(度数deg,2~多个颜色，颜色中间用逗号分隔)【从上开始，顺时针】**

加浏览器内核：
-webkit-linear-gradient (2~多个颜色，颜色中间用逗号分隔)
-webkit-linear-gradient (方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)【注：方向没有to，是指明的方向】
-webkit-linear-gradient (度数deg,2~多个颜色，颜色中间用逗号分隔)【从右开始，逆时针】

径向渐变

语法:
background/background-image :
radial-gradient (2至多个颜色)在颜色后面添加百分比【从小到大顺序】
-webkit-radial-gradient (方位,颜色)
方位，形状，颜色
例：background:-webkit-radial-gradient(top,circle, black 5%,white 10%,black 15%);

重复渐变:repeating[颜色必须跟百分比，否则无法形成重复渐变的效果]【百分比从小到大】

背景大小设置

background-size:需要调整背景图片的大小

四类： 像素值【单个 看到设置为固定像素值，高度会等比例变化】【两个 第一个宽度第二个高度】
百分比【单个/两个】
参照像素值：
cover：背景图片把整个背景全部覆盖； contain：一边铺满，另一边等比例，保持始终在div范围内；

背景图片位置

background-clip：调整背景位置

content-box：将背景图片放在内容区
padding-box：将背景图片放在内边距范围内
border-box：将背景图片放在边框范围内【默认】

过渡效果

transition-property：需要过渡的样式，默认all 、
transition-duration：运动时间 默认0s
transition-delay：延迟时间 默认0s
transition-timing-function：运动形式 默认ease
A.ease(慢快慢) B.linear(匀速) ease-in(加速) C.ease-out(减速)
D.ease-in-out(先加速后减速) E.cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
http:cubic-bezier.com F.steps()实现一个关键逐帧动画的功能
可直接写transition：过渡样式 运动时间 延迟时间 运动形式