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);
代码如下:
效果如下: