css3线性渐变的渐变角度_CSS线性渐变示例说明

css3线性渐变的渐变角度

In a linear gradient, the colors flow in a single direction, for example from left to right, top to bottom, or any angle you choose.

在线性渐变中，颜色沿单个方向流动，例如从左到右，从上到下或您选择的任何角度。

句法 (Syntax)

To create a linear gradient you must define at least two color stops. They are the colors the transitions are created among. It is declared on either the background or background-image properties.

要创建线性渐变，您必须至少定义两个色标。 它们是创建过渡的颜色。 它在background或background-image属性中声明。

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

If no direction is specified, the default transition is top to bottom.

如果未指定方向，则默认过渡是从上到下。

例子 (Examples)

从上到下： (Top to bottom:)

background: linear-gradient(red, yellow);

Left To right:

左至右 ：

To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word to which indicates the direction:

为了使左到右，你在开始时添加一个额外的参数linear-gradient()开始到指示方向的字：

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

Diagonal gradients:

对角渐变：

You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right.

您也可以通过指定水平和垂直起始位置(例如，左上或右下)来对角渐变。

Here’s a sample for a gradient starting from the top-left:

这是从左上角开始的渐变示例：

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

使用角度指定渐变的方向 (Using angles to specify the direction of the gradient)

You can also use angles, to be more accurate in specifying the direction of the gradient:

您还可以使用角度来更准确地指定渐变的方向：

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

The angle is specified as an angle between a horizontal line and the gradient line.

该角度被指定为水平线和梯度线之间的角度。

background: linear-gradient(90deg, red, yellow);

使用两种以上的颜色 (Using more than two colors)

You’re not limited to just two colors – you can use as many comma separated colors as you want.

您不仅限于两种颜色-您可以根据需要使用任意多个逗号分隔的颜色。

background: linear-gradient(red, yellow, green);

You can also use other color syntaxes like RGB or hex codes to specify the colors.

您还可以使用其他颜色语法(例如RGB或十六进制代码)来指定颜色。

硬色停止 (Hard color stops)

You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly:

您不仅可以使用渐变来渐变色，还可以使用它来立即从一种纯色变为另一种纯色：

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

更多信息： (More information:)

• The CSS Handbook: a handy guide to CSS for developers

  CSS手册：面向开发人员CSS便捷指南

翻译自: https://www.freecodecamp.org/news/css-linear-gradient-explained-with-examples/

css3线性渐变的渐变角度