8.背景颜色渐变

1.现行渐变中，颜色沿着一条直线过渡，从左到右、从右到左、从顶到底从底到顶，或延任意轴线

a、background:-webkit-linear-gradient(渐变起始位置，启示颜色，结果颜色)

 

      div{
                width: 100px;
                height: 100px;
                 /* background: -webkit-linear-gradient(渐变的开始位置,起始颜色,结束颜色); 背景渐变兼容性很差所以添加上浏览器私有                           前缀*/ 
                 background: -webkit-linear-gradient(top,yellow,blue); /* Safari 5.1-6.0 */
                 background: -o-linear-gradient(top,yellow,blue); /* Opera 11.1-12.0 */ 
                 background: -moz-linear-gradient(top,yellow,blue); /* Firefox 3.6-15 */
                 background: linear-gradient(top,yellow,blue); /* 标准语法 */
            }

b.

div{
                width: 100px;
                height: 100px;
                 /* background: -webkit-linear-gradient(渐变的起始位置，颜色，位置，颜色位置); 背景渐变兼容性很差所以添加上浏览器私有前缀*/ 
                 background: -webkit-linear-gradient(top,red 0%,blue 20%,red 80%); /* Safari 5.1-6.0 */
                 background: -o-linear-gradient(top,red 0%,blue 20%,red 80%); /* Opera 11.1-12.0 */ 
                 background: -moz-linear-gradient(top,red 0%,blue 20%,red 80%); /* Firefox 3.6-15 */
                 background: linear-gradient(top,red 0%,blue 20%,red 80%); /* 标准语法 */
            }