3.0 KiB
3.0 KiB
title | localeTitle |
---|---|
Linear Gradient | 线性梯度 |
线性梯度
这是一个存根。 帮助我们的社区扩展它 。
更多信息:
在“线性渐变”中,颜色沿单个方向流动,即 - 从左到右,从上到下,或您选择的任何角度。
具有两个色标的线性渐变
句法-
要创建线性渐变,您必须定义至少两个色标(它们是在其中创建过渡的颜色)。它在背景或背景图像属性上声明。
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
注意:如果未指定方向,则默认情况下转换为“从上到下”
不同的梯度过渡 -
从上到下 :
background: linear-gradient(red, yellow);
左到右 :
为了使左到右,你在直线梯度(开始时添加一个额外的参数)开始用这个词来指示方向:
background: linear-gradient(to right, red , yellow);
对角线位置:
您还可以通过指定水平和垂直起始位置(例如,左上角或右下角)来对角移动渐变。
这是从左上角开始的渐变样本 -
background: linear-gradient(to bottom right, red, yellow);
使用角度指定渐变的方向 -
您还可以使用角度,以更准确地指定渐变的方向:
background: linear-gradient(angle, colour-stop1, colour-stop2);
角度被指定为水平线和梯度线之间的角度。
background: linear-gradient(90deg, red, yellow);
使用两种以上的颜色 -
您不仅限于两种颜色,您可以根据需要使用尽可能多的逗号分隔颜色。
background: linear-gradient(red, yellow, green);
您还可以使用其他颜色语法(如RGB或十六进制代码)来指定颜色。
硬色停止 -
您不仅可以使用渐变来渐变颜色,还可以使用渐变颜色立即从一种纯色转换为另一种纯色
background: linear-gradient(to right,red 15%, yellow 15%);
更多信息 - Mozilla Docs上的线性渐变