浏览器支持两种类型的渐变：

 

　　linear,用linear-gradient()函数定义,

 

　　radial,用radial-gradient()函数定义.

 

　　使用过程中注意浏览器的兼容问题

 

　　Safari，Chrome：-webkit-linear-gradient

 

　　Firefox：-moz-linear-gradient

 

　　IE：-ms-linear-gradient

 

　　Opera：-o-linear-gradient

 

　　本篇文章将以Chrome浏览器为例进行讲解

 

　　线性渐变

 

　　要创建线性渐变，将起点和方向设置为角度，还要定义颜色停止必须指定至少两个停止颜色。

 

　　从顶部到底部的线性渐变

 

　　div{

 

　　/*倒退*/

 

　　width:200px;

 

　　height:200px;

 

　　background-color:#1a82f7;

 

　　background-repeat:repeat-x;

 

　　background:-webkit-linear-gradient(top,#2F2727,#1a82f7);

 

　　}

 

　　Image1.jpg

 

　　从左到右的渐变过程

 

　　div{

 

　　/*倒退*/

 

　　width:200px;

 

　　height:200px;

 

　　background-color:#1a82f7;

 

　　background-repeat:repeat-x;

 

　　background:-webkit-linear-gradient(left,#2F2727,#1a82f7);

 

　　}




本文转载自中文网