### **渐变(Gradients)** <br> 渐变类型: **线性渐变(Linear-Gradients)**- 向下/向上/向左/向右/对角方向 **径向渐变(Radial-Gradients)**- 由它们的中心定义 <br> <br> #### 一、 **线性渐变** 为了创建一个线性渐变,你必须**至少定义两种颜色**结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度) <br> **语法:** background: linear-gradient(direction方向, color-stop1, color-stop2, ...); direction方向的值有: to left:设置渐变为从右到左。 to right:设置渐变从左到右 to top:设置渐变从下到上 to bottom:设置渐变从上到下 <span style="color:#c30">这是默认值,可以不写</span> 已上值除了webkit,其他浏览器均可以。 <br> <br> **1.从上到下(默认情况下)**:(无需写上方向,只需要颜色即可) 实例: 从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色: ~~~ #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ } ~~~ <br> <br> **2.从左到右** 实例:从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色: ~~~ #grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ } ~~~ <br> <br> #### **3.对角** 通过指定水平和垂直的起始位置来制作一个对角渐变。 实例:从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色, ~~~ #grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ } ~~~ <br> <br> <br> <br> #### **二、 径向渐变** 径向渐变由它的中心定义。 为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。**默认情况下,**渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。 **语法** background: radial-gradient(center, shape size, start-color, ..., last-color);shape是形状, size是大小。 **1. 颜色结点均匀分布** 即只写颜色不写其他的 **实例** ~~~ #grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法 */ } ~~~ <br> <br> **2. 颜色结点不均匀分布** 即在颜色后面写上大小的百分比 **实例** ~~~ #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ } ~~~ <br> <br> **3.设置形状** shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。 **实例** ~~~ #grad { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */ } ~~~