CSS线性渐变 (Linear Gradients)

要创建线性渐变，您必须定义至少两个颜色停止。颜色停止是您想要渲染之间平滑过渡的颜色。您还可以设置一个起点和方向(或角度)以及梯度效果。

语法:

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

Direction - Top to Bottom (这是默认,从上到下)

下面的例子显示了一个从顶部开始的线性渐变。开始是红色，然后变成黄色:

例子:

#grad {background-image: linear-gradient(red, yellow);
}

Direction - Left to Right (从左到右)

下面的例子显示了一个从左侧开始的线性渐变。开始是红色，然后变成黄色:

例子:

#grad {background-image: linear-gradient(to right, red , yellow);
}

Direction - Diagonal （对角线）

您可以通过指定水平和垂直的起始位置来创建斜角渐变。
下面的示例显示了从左上角开始(到右下角)的线性渐变。开始是红色，然后变成黄色:

#grad {background-image: linear-gradient(to bottom right, red, yellow);
}

如果你想对渐变的方向有更多的控制，你可以定义一个角度，而不是预定义的方向(向下，上，向右，向左，向右，等等)。0度的值相当于“to top”。90度的值相当于“向右”。180度的值相当于“到底”。

语法:

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

下面的例子展示了如何在线性渐变中使用角度:

#grad {background-image: linear-gradient(180deg, red, yellow);
}

使用多种颜色的stop

下面的例子显示了一个线性渐变(从上到下)与多个颜色停止:

例子 :

#grad {background-image: linear-gradient(red, yellow, green);
}

下面的例子展示了如何创建一个线性渐变(从左到右)，颜色为彩虹和一些文本:

例子:

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

使用透明

CSS渐变也支持透明度，可以用来创建渐隐效果。
为了增加透明度，我们使用rgba()函数来定义颜色停止。rgba()函数中的最后一个参数可以是0到1之间的值，它定义了颜色的透明度:0表示完全透明，1表示完全透明(不透明)。
下面的例子显示了一个从左侧开始的线性渐变。它开始完全透明，过渡到全红色:

例子:

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复一个线性渐变

repeat -linear-gradient()函数用于重复线性梯度，

演示:

#grad {background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS如何设置自定义渐变色? 线性渐变篇相关推荐

css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边解决:在before ...
CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）
1 linear-gradient(线性渐变) 1.1按方向渐变语法: background: linear-gradient(direction, color-stop1, color-stop2 ...
html中怎么修改黑体,css怎样设置黑体？
css怎样设置黑体?下面本篇文章给大家介绍一下css中设置字体为黑体的方式,同样适用于设置其他字体,有着一定的参考价值,现在将它分享给各位,希望对大家有帮助. css怎样设置黑体样式? css设置字体 ...
html修改黑体字体,css怎样设置黑体？
css怎样设置黑体?下面本篇文章给大家介绍一下css中设置字体为黑体的方式,同样适用于设置其他字体,有着一定的参考价值,现在将它分享给各位,希望对大家有帮助. css怎样设置黑体样式? css设置字体 ...
番外：设置自定义字体
番外:css中设置自定义字体(引入字体) 1.常规下(你自己有字体包的情况下) 假设你的文件夹这个样子: font文件夹下有两个字体文件,此时你想使用zkkh.ttf(站酷酷黑字体) 代码如下: &l ...
html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探
1 径向渐变radial-gradient 这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里 1.1 基本语法线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐 ...
html设置颜色从上到下渐变效果图,css怎么设置渐变色？
以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由 ...
css渐变色之线性渐变
目录 1.线性渐变 2.径向渐变 1.线性渐变线性渐变使用linear-gradient,语法如下: background-image: linear-gradient(渐变方向, 颜色1[位 ...
HTML5圆形线性渐变,css中linear-gradient()函数是干什么的？实现线性渐变的圆形边框（代码）...
在前端开发过程中,有时会利用linear-gradient实现各种各样的效果,本章给大家介绍css中linear-gradient()函数是干什么的?实现线性渐变的圆形边框(代码).有一定的参考价值, ...

CSS如何设置自定义渐变色? 线性渐变篇