CSS3---实现颜色的渐变

当我们设置页面的时候为了美观，在显示出来的页面颜色会从一中颜色过渡到另一种颜色，这就需要用CSS3的渐变来实现啦;

以前，我们总是通过插入图片的方法来实现这些效果，现在，通过使用CSS3渐变（gradients）实现，这样渐变的效果看起来效果更好啦。

CSS3渐变（Gradients）：渐变的类型有两种：线性渐变和径向渐变;

1、线性渐变（Linear Gradients）：包括向下，向上，向左，向右还有对角方向的渐变;

语法：

background:linear-gradient(direction,color-stop1,color-stop2,.....);

参数： direction---规定渐变的方向，默认情况为：由上往下渐变;

color-stop1---开始的颜色;

color-stop2，.......---过渡的颜色；

先面以从左到右渐变为例，实现从左边开始的线性渐变，起点为蓝色，慢慢过渡到红色：

<style>
#grad {
     background: linear-gradient(to right, to right, red,orange,yellow,green,blue,indigo,violet);  
}
</style>

<body>
<div id="grad"></div>
</body>

2、使用角度现实渐变：好处就是在渐变的方向上可以有更多的控制;

语法：

background: linear-gradient(angle, color-stop1, color-stop2);

参数：angle----角度：指水平线和渐变线之间的角度，逆时针方向计算；

如下实现不同的角度的渐变：

<style>
#grad1 {
    background: linear-gradient(0deg, red, blue); 
}

#grad2 {
    background: linear-gradient(90deg, red, blue); 

#grad3 {
    background: linear-gradient(180deg, red, blue); 
}

#grad4 {
    background: linear-gradient(-90deg, red, blue);*/
}
</style>

<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>

3、使用透明度实现渐变（Transparency）：可以减弱变淡的效果而添加透明度，使用rgba（）函数来定义颜色的节点;

如下例子：

<style>
#grad {
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
}
</style>

<body>
<div id="grad"></div>
</body>

上述代码中： rgba（）函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明渡：0表示完全透明，1表示完全不透明;

4.径向渐变（Radial Gradients）：有由他们的中心定义;

语法：

background: radial-gradient(center, shape size, start-color, ..., last-color);

参数：center---默认情况下是由中心渐变;

shape size---默认情况下是圆形的;

start-color：渐变开始的颜色;

start-color：渐变结束的颜色;

如下例子：径向渐变--颜色结点不均匀分布;

<style>
#grad {
    background: radial-gradient(ellipae， red 5%, green 15%, blue 60%);
}
</style>

<body>
<div id="grad"></div>
</body>

CSS3---实现颜色的渐变

猜你喜欢