逆战班学生教你学习css3 渐变(gradients)

逆战班学生教你学习css3 渐变(gradients)

随着前端的深入学习，我发现很多网页设计时使用到的图片背景是由2种纯颜色或者多种纯颜色过渡相接而成，也就是渐变的，这样会使图片背景看起来更加具有条理，更加美观。

CSS3讲述了2种不同的渐变方式：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。

1）线性渐变（Linear Gradients）

顾名思义，线性渐变就是一个点渐变到另一个或者多个点，形成像线一样的渐变方式。
下面开始创建线性渐变：
首先，我们创建一个盒子容器，在背景图样式background-image的后面加入渐变方式和颜色，代码如下：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:linear-gradient(red , yellow );}

运行如下：

注：添加2个以上颜色时，需要使用逗号隔开，示例：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:linear-gradient(red,yellow,blue,pink);}

线性渐变默认的方向是至上而下的，所以红色在上方，黄色在中间，依次往下排布，我们可以增加方向来改变渐变的方向，示例：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:linear-gradient(to right, red,yellow,blue,pink);}
方向改为：从左到右(to right)
方向设置包括：从右到左（to left）、从左到右(to right)、从下到上（to top）、也可以设置对角渐变：从左上到右下（to right bottom）、从左下到右上（to right top）…

设置方向还可以通过添加角度值来实现：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:linear-gradient(45deg, red,yellow,blue,pink);}
角度改为：45度(45deg)

角度为负数，图像是按照逆时针方向旋转；
角度为正数，图像是按照顺时针方向旋转；

2）径向渐变（Radial Gradients）
顾名思义，就是由中间一个点向四周发散的渐变方式。
下面开始创建线性渐变：
首先，我们创建一个盒子容器，在背景图样式background-image的后面加入渐变方式和颜色，代码如下：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:radial-gradient( red,yellow,blue,pink);}

可以通过更改不同颜色的比例来实现颜色的过渡：
#box{ width: 100px; height:100px; border:1px black solid; margin:100px;
background-image:radial-gradient( red 25% , yellow 50%,blue 75%,pink );}
其中red 25% , yellow 50%,blue 75%,pink表示：0%~25%为红色纯色，25% ~50%为红色过渡到黄色，50% ~75%为黄色过渡到蓝色，75% ~100%为蓝色过渡到粉色。

以上，就是我为大家带来的CSS3渐变的学习，谢谢！