渐变色–线性渐变

人类对美的追求是无止境的，色彩的搭配是对美的最基本要求，而其中的渐变，就能给人一种舒缓的感觉，它不那么的突兀，给人一种不逼迫、缓缓地和高逼格感觉。

很流行的渐变网页

Css3引入了渐变的功能，有线性渐变和径向渐变两种，今天介绍线性渐变。要注意的是，这里的渐变并不是颜色，而是一种特殊的图像。所以只会在background-image里起作用。

两种渐变

语法

设置渐变色

background-image：linear-gradient(angle, color-stop1, color-stop2, …)

方向图

Angle：表明渐变的方向。有两种选择：

1、方向：上下左右，对角线

to+方向，表明最终的方向，to right表明往右依次渲染颜色。

例子：从左往右

background: linear-gradient(to right，red, yellow);

从下到上

background: linear-gradient(to top，red, yellow);

对角线，左上角对右下角

background: linear-gradient(to bottom right，red, yellow);

效果图

2、角度

单位用deg，这个角度并不是顺时针方向，而是逆时针。

角度图

background: linear-gradient(0deg，red, yellow)等同于background: linear-gradient(to top，red, yellow);

color-stop：渐变点的颜色值，必须要有两个渐变点。

除了可以设置多个渐变点，还可以规定渐变点的起始位置，以横坐标平分100%为算。

例子，黄色渐变起始点在30%位置，绿色渐变起始点在60%

background: linear-gradient(to right,red, yellow 30%, lime 60%);

各占不同比值的颜色

案例

结合透明度rgba，还可以给图片加个淡入效果。

background:lineargradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(“images/sky.jpg”);

对比图

这些仅仅只是渐变的基础，还可以整出更炫酷的的东西。

很流行的渐变登录框

渐变背景图

知识导图

总结