css3渐变的使用

css3渐变的使用

    逆战班给你介绍css3渐变的使用，CSS3 渐变(gradient)可以实现一个颜色缓慢过渡到另一个颜色。并且是支持两种或两种以上的颜色。

1、线性渐变

语法：background: linear-gradient(direction, color1, color2, …);
说明：direction：默认为to bottom，即从上向下的渐变。

示例1：to left、top right、to bottom、to top

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“brown-orange”渐变。

示例2：to right bottom、to right top、to left bottom、to left top

依次为“右下角”、“右上角”、“左下角”、“左上角”的渐变：




示例3：使用角度渐变
代码如下：

效果如下：

示例4：两个纯色衔接在一个背景图中、三个纯色衔接在一个背景图中

代码如下：


效果如下：


依次为“两个纯色衔接在一个背景图中”、“两个纯色衔接在一个背景图中”的渐变

注：假设在一个背景中有三种颜色时，写完第一种颜色，在写第二种颜色时，应该重复第一种颜色的范围，做一个直接过渡，然后在写第二种颜色及它占到了的颜色范围，然后依次类推。

示例5：利用渐变做倒影效果

代码如下：

效果如下：

2、径向渐变
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。
语法：background: radial-gradient(start-color, …, last-color);
代码如下：

效果如下：