CSS梯度：语法速效课程

CSS渐变：语法速成课程

过去，大多数网站大量使用图片来创建漂亮的UI。多亏了各种CSS属性，这种趋势已经改变。本教程将帮助您学习CSS渐变。您可以使用渐变替换各种UI元素以及背景中的图像。稍加练习，您就可以创建复杂的图案，而无需使用任何图像。

CSS渐变在浏览器中具有良好的支持性，允许您在两个或多个指定的颜色之间创建平滑的视觉过渡。渐变使您可以控制许多设置，例如渐变的大小、角度、颜色停止位置等。

在本篇文章中，我将介绍线性、径向以及较新的重复渐变。

关键要点

• CSS渐变在浏览器中得到广泛支持，允许在两个或多个指定的颜色之间平滑过渡，并控制许多设置，例如大小、角度和颜色停止位置。
• 线性渐变是最常用的渐变，沿直线从一种颜色过渡到另一种颜色。这可以通过指定方向或角度来控制。
• 径向渐变以圆形或椭圆形图案过渡颜色，从单个点开始并向外扩展。可以使用各种参数来控制径向渐变的形状、大小和位置。
• 重复渐变与其他渐变类似，但会无限重复颜色停止位置，允许创建复杂的图案和背景。它们采用与非重复渐变相同的参数。

线性渐变

线性渐变是最常用的渐变。它看起来像这样，括号中的值表示值的类型：

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

如果您不指定方向，渐变将从顶部开始，具有第一种颜色的完整强度，然后在到达底部时平滑过渡到最后一种颜色。

为了获得更多控制，您可以指定渐变的方向。您可以使用简单的术语（例如left、bottom right）来实现，也可以指定角度。以下代码片段创建从左到右的背景：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

查看CodePen上的示例： Left to Right Linear Gradient

较旧的浏览器支持略微不同的语法，并且需要特定于浏览器的前缀。在旧版浏览器中，您会指定起点而不是终点。旧版浏览器的CSS3渐变代码如下所示：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

为线性渐变指定角度

如果您需要以特定角度创建渐变，可以直接指定一个角度。以下代码创建60度角的渐变：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

将从下到上的线视为零度，如果线顺时针移动，则角度会增加。例如：

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

这将创建一个底部为红色，顶部为蓝色的渐变。而以下代码将创建一个水平渐变，左侧为红色，右侧为蓝色：

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

查看CodePen上的示例：Linear Gradients with Different Angles

在线性渐变中指定颜色停止位置

如果您想不均匀地更改颜色，您可以自己指定颜色停止位置。颜色停止位置可以指定为百分比值或绝对长度。您不需要为第一个和最后一个颜色指定停止位置。给定颜色在其指定的颜色位置上具有其完整强度。这是一个示例：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

如果没有指定停止位置，颜色将均匀间隔。

查看CodePen上的示例：Linear Gradient with Color Stops

径向渐变

径向渐变不太常见，也更复杂。这是径向渐变的语法：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

当没有指定任何内容时，默认形状为椭圆形，大小为最远角，位置为中心。颜色停止位置的指定方式与线性渐变完全相同。以下代码片段将绘制椭圆形径向渐变：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

查看CodePen上的示例：Radial Gradient Example

更改径向渐变的大小

径向渐变的大小由四个值决定：closest-side、farthest-side、closest-corner和farthest-corner。当与shape值一起使用时，这些关键字定义形状。渐变的形状是在假设渐变将持续无限地延伸，超出应用渐变的元素的边界的情况下工作的。

让我们来看一个例子，使这一点更清楚。我们将在四个元素上创建四个渐变：

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

在下面的CSS中，我使用了四个关键字值：

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

查看CodePen上的示例：Radial Gradients with Different Size Keyword Values

请注意，在演示中，每个渐变之间存在细微但明显的差异。

在径向渐变中定义颜色停止位置

径向渐变中的颜色停止位置类似于线性渐变。请注意，我还将圆心的位置指定为百分比。如果需要，也可以使用像素值。以下是一个代码片段来演示这一点：

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

查看CodePen上的示例：Radial Gradient with Color Stops

重复渐变

重复渐变与其他渐变类似，并采用相同的参数。唯一的区别是它们会无限重复颜色停止位置。颜色的位置会根据基本渐变长度的倍数进行偏移。正如您将看到的，这种重复允许我们创建复杂的图案和背景。

需要注意的一点是，当您在同一个元素上使用多个重复渐变时，第一个渐变将显示在顶部。当然，这意味着如果第一个渐变的每种颜色都是100%不透明的（即没有透明度），则堆栈中的其他渐变将不可见。

重复线性渐变

要创建基本的重复线性渐变，我们可以执行以下操作：

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

查看CodePen上的示例：Repeating Linear Gradient

要突然更改颜色，您必须指定两种颜色。要创建微妙的图案，您只需添加另一个渐变，就像添加多个背景图像一样：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

这次我将渐变设置为透明而不是白色。我建议您尝试不同的颜色停止位置和角度。

查看CodePen上的示例：Repeating Linear Gradient with Multiple Gradients

重复径向渐变

重复径向渐变类似于标准径向渐变。以下是如何创建简单的重复径向渐变的代码：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

查看CodePen上的示例：Repeating Radial Gradient

您还可以像这样分层多个重复径向渐变：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

查看CodePen上的示例：Repeating Radial Gradient with Multiple Gradients

结论

在本教程中，我尝试涵盖CSS渐变的各个方面。在许多需要简单图案的情况下，渐变可以消除使用图像的需要。当然，虽然渐变确实避免了图像的额外HTTP请求，但它们仍然可能导致性能问题，因此应谨慎使用。

关于CSS渐变的常见问题

CSS中的线性渐变和径向渐变有什么区别？

在CSS中，渐变用于在两个或多个指定的颜色之间创建平滑的过渡。线性渐变沿直线过渡颜色，从一个点开始到另一个点结束。渐变的方向可以通过角度（例如“to right”或“45deg”）或通过声明起点（例如“to top right”）来定义。

另一方面，径向渐变以圆形或椭圆形图案过渡颜色。它们从一个点开始并向外扩展，创建一个圆形或椭圆形形状。可以使用各种参数来控制径向渐变的形状、大小和位置。

如何在CSS中创建重复渐变？

CSS提供了一种使用repeating-linear-gradient()和repeating-radial-gradient()函数创建重复渐变的方法。这些函数的工作方式与其非重复对应函数类似，但它们会无限期地重复指定的渐变图案，从而创建一个无缝重复的图案。这些函数的语法类似于linear-gradient()和radial-gradient()的语法，但是您需要以创建重复图案的方式指定颜色停止位置。

CSS渐变中的颜色停止位置是什么？

颜色停止位置是定义您想要渲染平滑过渡的颜色以及每种颜色应在渐变中出现的点。在CSS渐变中，您可以根据需要指定任意数量的颜色停止位置。每个颜色停止位置都由一个颜色值定义，后跟可选的长度或百分比。如果您不指定长度或百分比，则颜色停止位置将均匀间隔。

如何控制线性渐变的方向？

可以使用linear-gradient()函数的第一个参数来控制线性渐变的方向。此参数可以是角度（例如“45deg”），也可以是指定起点的关键字，例如“to right”或“to top left”。如果您不指定方向，则渐变将从上到下。

如何控制径向渐变的形状和大小？

可以使用radial-gradient()函数的第一个参数来控制径向渐变的形状和大小。此参数可以是形状关键字（“circle”或“ellipse”），后跟可选的大小关键字（“closest-side”、“farthest-side”、“closest-corner”、“farthest-corner”）和/或位置。如果您不指定形状，则渐变为椭圆形。如果您不指定大小，则渐变将延伸到最近的一侧。

我可以在CSS渐变中使用透明度吗？

是的，您可以通过使用RGBA颜色值在CSS渐变中使用透明度。RGBA颜色值由以下内容指定：rgba(red, green, blue, alpha)。alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

如何创建具有硬颜色变化的渐变？

要创建具有硬颜色变化的渐变，您可以使用具有相同位置的多个颜色停止位置。例如，“blue, green 50%, green 50%, yellow”创建了一个渐变，该渐变在中间从蓝色突然变为绿色，在末尾从绿色变为黄色。

我可以将渐变用作背景图像吗？

是的，您可以将渐变用作CSS中的背景图像。渐变函数返回CSS图像数据类型，可以在可以使用图像的任何位置使用。例如，您可以将渐变用作元素的背景图像，或用作多个背景的一部分。

我可以在CSS中动画渐变吗？

CSS不支持直接动画渐变。但是，您可以通过动画具有重复渐变的元素的background-position或background-size，或者通过使用渐变作为动画内容上的蒙版来实现类似的效果。

所有浏览器都支持CSS渐变吗？

所有现代浏览器（包括Chrome、Firefox、Safari、Edge和Internet Explorer 10及更高版本）都广泛支持CSS渐变。但是，对于不支持渐变的旧版浏览器，您应该提供备用颜色。

以上是CSS梯度：语法速效课程的详细内容。更多信息请关注PHP中文网其他相关文章！