CSS3 渐变效果（20160827-0027）

CSS3 背景渐变，主要有两种形式：线性渐变和径向渐变。

一、线性渐变

语法：linear-gradient(方位, 起始色, 末尾色)

方位可选参数，渐变的方位。可以使用的值：to top、to top right、to right、to bottom、to bottom left、to left、to top left起始色必选参数，颜色值末尾色必选参数，颜色值

通过top、left、right、bottom这四组实现的渐变方向比较单一，可以使用角度单位的数值来设置方位。比如0度（0deg）相当于to top；角度会沿逆时针方向随着角度的增加而增加。

@charset "utf-8";div{/* 设置宽高方便观察 */width: 400px;height: 400px;border:solid 1px silver;}/********************** 线性渐变 **********************//* 简单的线性渐变和斜的线性渐变 */div{/* 两个必须参数，这是会发现渐变是自上而下的，呈线性渐变 *//*background-image:linear-gradient(orange, green);*//* 添加一个向上的方位，to 表示向哪个方向，这里表示自下而上 *//*background-image: linear-gradient(to top, orange, green);*//* 添加一个向左的方位 *//*background-image: linear-gradient(to left, orange, green);*//* 添加一个斜向的线性渐变*//*background-image: linear-gradient(to top left, orange, green);*/}/* 通过角度设置方位的线性渐变，0 ~ 360 度之间，可以是负值 */div{/* 0 度相当于to top *//*background-image: linear-gradient(0deg, orange, green);*//* 随着角度的变化，沿顺时针方向变化 *//* 45 度相当于to top right *//*background-image: linear-gradient(45deg, orange, green);*//*background-image: linear-gradient(60deg, orange, green);*//* 90 度相当于to right *//*background-image: linear-gradient(90deg, orange, green);*//* 180 度相当于to bottom *//*background-image: linear-gradient(180deg, orange, green);*//* 角度也可以是负值，沿逆时针方向变化  *//* -45 度相当于to top left *//*background-image: linear-gradient(-45deg, orange, green);*//* -90 度相当于to left *//*background-image: linear-gradient(-90deg, orange, green);*/}/* 多种颜色的渐变 */div{/*background-image: linear-gradient(orange, green, red, blue);*/}/* 默认情况下，起始颜色的百分比位置是0%，末尾颜色的百分比位置是100%，其它位置按照平均值分配。位置也可以使用px像素来设定，但计算麻烦点。例如 background-image: linear-gradient(orange, green, red, blue); orange 位置是0%，green 位置是33.33%，red 位置是66.66%，blue 是100%。比例是在渐变的方向上计算的。0% - 33.33% 之间是orange 到 green 的渐变，33.33％ - 66.66% 之间是green 到 red 的渐变，66.66% - 100% 是red 到 blue 的渐变。提示：如果设置起始颜色的位置不是0% 的话，会出现起始颜色位置之前的区域是起始色。如果设置的末尾颜色的位置不是100% 的话，会出现末位颜色位置之后的区域是末位色。 */div{/* 改变起始颜色和末位颜色的位置 *//*background-image: linear-gradient(orange 25%, green 50%, blue 75%);*//* 如果想要起始颜色之前的区域为透明，添加一个新的起始颜色，把这个新的起始颜色设置为透明就可以了 *//*background-image: linear-gradient(rgba(0, 0, 0, 0) 25%,orange 25%, green 50%, blue 75%);*//* 如果想要末尾颜色之前的区域为透明，添加一个新的末尾颜色，把这个新的末尾颜色设置为透明就可以了 *//*background-image: linear-gradient(orange 25%, green 50%, blue 75%, rgba(0, 0, 0, 0) 75%);*//* 如果想要起始、末尾颜色之前的区域为透明，添加新的起始和末尾颜色，把新的起始和末尾颜色都设置为透明就可以了*//*background-image: linear-gradient(rgba(0, 0, 0, 0) 25%, orange 25%, green 50%, blue 75%, rgba(0, 0, 0, 0) 75%);*//* 可以通过添加方位，来改变渐变的方向 *//*background-image: linear-gradient(to top right, orange 25%, green 50%, blue 75%);*//*background-image: linear-gradient(to left, orange 25%, green 50%, blue 75%);*//* 用 px像素来设定位置 *//*background-image: linear-gradient(orange 0px, green 200px, blue 400px);*/}/* 结合背景，并使用透明渐变实现层次感*/div{/*background-color: red;*//*background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))*/}/* 之前的渐变都不是重复的，也可以设置重复渐变 */div{/*background-image: repeating-linear-gradient(to top right, orange 10px, green 30px);*/}/* 加上兼容前缀,支持带前缀和不支持带前缀的完整格式 */div{/*background-image: -webkit-linear-gradient(to top right, orange, green);background-image: -moz-linear-gradient(to top right, orange, green);background-image: -o-linear-gradient(to top right, orange, green);background-image: linear-gradient(to top right, orange, green);*/}

CSS3 渐变，浏览器支持：

 OperaFirefoxChromeSafariIE部分支持需带前缀11.5无4 ～ 94 ～ 5无支持需带前缀无3.6 ～ 1510 ～ 255.1 ～ 6无支持不带前缀12.1+16+26+6.1+10.0+

提示：repeating-linear-gradient 属性值和 linear-gradient 基本相同。

二、径向渐变（也叫放射性渐变）

径向渐变：radial-gradient 属性值。它是从一个点向四周发散的方式扩展。

语法：radial-gradient(方位, 起始色, 末尾色)

属性值样式表：

方位可选参数，径向的方位，可以使用的值有：像素、百分比、固定值，或复合搭配使用。起始色必选参数，颜色值末尾色必选参数，颜色值

/* 简单的径向渐变 */div{/* 两个必选参数 *//*background-image: radial-gradient(green, blue, red);*//* 如果想设置第一个可选参数，有一种做法是设置为：circle（圆形）或ellipse（椭圆形）。默认是椭圆形 *//*background-image: radial-gradient(circle, green, blue, red);*/}/* 设置径向渐变的发散方向 */div{/* 设置从底部发散 *//*background-image: radial-gradient(circle at bottom , green, blue, red);*//* 复合方向，设置从右上发散 *//*background-image: radial-gradient(circle at top right , green, blue, red);*/}/* 设置发散的距离，即圆的半径长度 */div{/* 指定径向渐变的半径长度为从圆心到离圆心最近的边 *//*background-image: radial-gradient(circle closest-side, green, blue, red);*//* 指定径向渐变的半径长度为从圆心到离圆心最近的角 *//*background-image: radial-gradient(circle closest-corner, green, blue, red);*//* 指定径向渐变的半径长度为从圆心到离圆心最远的边 *//*background-image: radial-gradient(circle farthest-side, green, blue, red);*//* 指定径向渐变的半径长度为从圆心到离圆心最远的角 *//*background-image: radial-gradient(circle farthest-corner, green, blue, red);*//* 也可以用像素表示半径 *//*background-image: radial-gradient(circle 50px, green, blue, red);*//*background-image: radial-gradient(circle 250px, green, blue, red);*/}/* 之前的渐变都不是重复的，也可以设置重复渐变 */div{/*background-image: repeating-radial-gradient(circle 50px, green, blue, red);*/}/* 加上兼容前缀 */div{/*background-image: -webkit-radial-gradient(circle, green, blue, red);background-image: -moz-radial-gradient(circle, green, blue, red);background-image: -o-radial-gradient(circle, green, blue, red);background-image: radial-gradient(circle, green, blue, red);*/}/* 重复背景加上兼容前缀就是兼容模式了 */div{/*background-image: -webkit-radial-gradient;background-image: -moz-radial-gradient;background-image: -o-radial-gradient;background-image: radial-gradient;*/}

如果想设置第一个可选参数，有一种做法是设置为：circle(圆形)或 ellipse(椭圆形)。默认是椭圆形。

形状说明circle圆形ellipse椭圆形，默认值不单单可以设置形状，也可以设置形状的发散方向

方向说明top从顶部发散left从左部发散right从右部发散bottom从底部发散center从中间发散，默认值可以设置发散的距离，即圆的半径

半径关键字说明closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边farthest-corner指定径向渐变的半径长度为从圆心到离圆心最圆的角

示例代码地址