CSS3基础——渐变

渐  变

一、什么是渐变：
　　在多种颜色之间进行柔和的过渡
二、语法：
　　属性:background-image:
　　取值:
　　　　linear-gradient（值，值…） –> 线性渐变
　　　　radial-gradient（值，值…） –> 径向渐变
　　　　repeating-linear-gradient（） –> 重复线性渐变
　　　　repeating-radial-gradient（） –> 重复径向渐变
　　1、线性渐变（重点）：
　　　　background-image:linear-gradient();
　　　　linear-gradient(angle,color-point,color-point…..);
　　　　　　angle：渐变的方向或角度
　　　　　　　　方向值：
　　　　　　　　　　to top：向上
　　　　　　　　　　to bottom：向下
　　　　　　　　　　to left：向左
　　　　　　　　　　to right：向右
　　　　　　　　角度：（逆时针）
　　　　　　　　　　如：0deg、90deg（从左向右）、178deg
　　　　　　color-point：表示颜色的起始点、各个过渡点、结束点，颜色位置组合
　　　　　　　　如：color-point：red 0%或blue 50%
　　　　如：从上向下，实现红色0%到绿色（50%）到蓝色（100%）渐变
　　　　　　background-image:linear-gradient(to bottom,red 0%,green 50%,blue 100%);
　　2、径向渐变：
　　　　radial-gradient([size at position],color-point,color-point….);
　　　　　　size：圆的半径
　　　　　　position：圆心出现的位置，默认为元素的中心
　　3、重复线性渐变：
　　　　repeating-linear-gradient(angle,color-point);
　　　　如：repeating-linear-gradient(to bottom,red 0px,green 10px,blue 20px);
三、渐变是新特性：
　　所以会有浏览器的兼容性，对不支持的浏览器版本可通过浏览器前缀，去匹配不同的浏览器：
　　　　Firefox：-moz-
　　　　Chrome、Safari：-webkit-
　　　　Opera：-o-
　　如：

#div1{        background-image:linear-gradient(....);        background-image:-moz-linear-gradient(....);        background-image:-webkit-linear-gradient(....);        background-image:-o-linear-gradient(....);    }