css:好看的渐变色_CSS渐变：语法速成课程

古城微笑少年丶 2022-12-03 11:24 182阅读 0赞

css:好看的渐变色

In the past most websites used images heavily to create a fancy UI. Thanks to various CSS properties this trend has changed. This tutorial will help you to learn about [CSS gradients][].You can use gradients to replace images in various UI elements as well as in backgrounds. With a little practice you can create complex patterns without using a single image.

过去，大多数网站都大量使用图像来创建精美的UI。 由于各种CSS属性，这种趋势已经改变。 本教程将帮助您了解[CSS渐变][CSS gradients] 。您可以使用渐变来替换各种UI元素以及背景中的图像。 通过少量练习，您可以创建复杂的图案而无需使用单个图像。

CSS gradients, which have [excellent browser support][], allow you to create smooth visual transitions between two or more specified colors. Gradients give you control over a lot of settings like the size of the gradient, its angle, position of color stops, etc.

CSS渐变具有[出色的浏览器支持][excellent browser support] ，可让您在两种或多种指定颜色之间创建平滑的视觉过渡。 渐变使您可以控制许多设置，例如渐变的大小，其角度，色标的位置等。

In this post, I’ll cover linear, radial, as well as the newer repeating gradients.

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

## 线性渐变 **(**Linear Gradients**)** ##

[Linear gradients][] are the most commonly used gradients. The looks like this, with the bracketed values representing the types of values:

[线性渐变][Linear gradients]是最常用的渐变。 看起来像这样，括号内的值代表值的类型：

.example {
      background: linear-gradient(
        [direction], [first-color], [second-color], [more-colors ...]
      );
    }

If you don’t specify a direction, the gradient will start at the top with full strength of the first color then smoothly transition to the last color as it reaches the bottom.

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

For more control, you can specify the direction of gradient. You can do it either by using simple terms like `to left`, `to bottom right`, or you can specify angles. Here is the code snippet to create a background that goes from left to right:

要进行更多控制，可以指定渐变方向。 您可以使用简单的术语(例如`to left` ， `to bottom right` ，也可以指定角度。 这是创建从左到右的背景的代码段：

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

See the Pen [Left to Right Linear Gradient][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔[从左到右的线性渐变][Left to Right Linear Gradient] 。

Older browsers support a slightly different syntax and require browser specific prefixes. In older browsers, instead of specifying the end point you specify a start point. CSS3 gradient code for older browsers looks like this:

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

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

## 指定线性渐变的角度 **(**Specifying Angles for Linear Gradients**)** ##

If you need to create a gradient at a specific angle, you can specify one directly. The code below creates a gradient at an angle of 60 degrees.

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

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

Considering a line from bottom to top to be at zero degrees, the angle increases if the line moves in a clockwise direction. For instance:

考虑从下到上的直线为零度，如果直线沿顺时针方向移动，角度将增加。 例如：

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

This will create a gradient with red at the bottom and blue at the top. While the following will create a horizontal gradient with red on the left side and blue on the right:

这将创建一个渐变，底部为红色，顶部为蓝色。 虽然以下内容将创建一个水平渐变，左侧为红色，右侧为蓝色：

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

See the Pen [Linear Gradients with Different Angles][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )通过[不同角度][Linear Gradients with Different Angles]绘制笔[线性渐变][Linear Gradients with Different Angles] 。

## 指定线性渐变中的色标 **(**Specifying Color Stops in Linear Gradients**)** ##

If you want to change the colors non-uniformly you can specify color stops yourself. Position of color stops can be specified as a percentage value or an absolute length. You don’t need to specify the stop position for first and last color. A given color is at its full strength on the position that you specified. Here, is an example:

如果要不均匀地更改颜色，可以自己指定颜色停止。 色标的位置可以指定为百分比值或绝对长度。 您无需指定第一种和最后一种颜色的停止位置。 给定的颜色将在您指定的位置上发挥其全部强度。 这里是一个例子：

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

If there are no stops specified, the colors will be spaced evenly.

如果未指定挡块，则颜色将均匀分布。

See the Pen [Linear Gradient with Color Stops][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上[带有][CodePen] SitePoint( [@SitePoint][SitePoint] )的[颜色停止][Linear Gradient with Color Stops]的笔[线性渐变][Linear Gradient with Color Stops] 。

## 径向渐变 **(**Radial Gradients**)** ##

[Radial gradients][] are less common and more complex. This is the syntax for radial gradients:

[径向渐变][Radial gradients]不太常见，更复杂。 这是径向渐变的语法：

.example {
      background: radial-gradient(
        [shape] [size and position], [first-color], [more-colors ...], [last-color]
      );
    }

When nothing is specified, the default shape is an ellipse, the size is the farthest corner, and its position is center. Color stops are specified exactly as in linear gradients. The following snippet will draw a radial gradient in the shape of an ellipse:

如果未指定任何内容，则默认形状为椭圆，大小为最远的角，其位置为中心。 完全按照线性渐变指定色标。 以下代码段将绘制一个椭圆形的径向渐变：

.example {
      background: radial-gradient(yellow, red, black);
    }

See the Pen [Radial Gradient Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔[径向渐变示例][Radial Gradient Example] 。

## 更改径向渐变的大小 **(**Changing the Size of a Radial Gradient**)** ##

The size of a radial gradient is determined by four values: `closest-side`, `farthest-side`, `closest-corner`, and `farthest-corner`. When used with the shape value, these keywords define the shape. The shape of the gradient works under the assumption that the gradient will continually infinitely, past the borders of the element on which the gradient is applied.

径向梯度的大小由四个值确定： `closest-side` ， `farthest-side` ， `closest-corner`和`farthest-corner` 。 与形状值一起使用时，这些关键字定义形状。 渐变的形状在以下假设下起作用：渐变将连续无限地经过应用渐变的元素的边界。

Let’s take a look at an example to make this more clear. We’ll create four gradients on four elements:

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

In the CSS below, I’m using the four keyword values:

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

.gradient1 {
      background: radial-gradient(circle farthest-corner, red, black);
    }
    
    .gradient2 {
      background: 
       radial-gradient(circle farthest-side, red, black);
    }
    
    .gradient3 {
      background: radial-gradient(circle closest-side, red, black);
    }
    
    .gradient4 {
      background: radial-gradient(circle closest-corner, red, black);
    }

See the Pen [Radial Gradients with Different Size Keyword Values][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [使用不同大小的关键字值][Radial Gradients with Different Size Keyword Values]的笔形[径向渐变][Radial Gradients with Different Size Keyword Values] 。

Notice in the demo how there is a slight, but noticeable difference in each gradient.

请注意，在演示中，每个梯度有微小但明显的差异。

## 在径向渐变中定义色标 **(**Defining Color Stops in Radial Gradients**)** ##

Color stops in radial gradients are similar to linear gradients. Observe that I have also specified the position of the center of the circle as a percentage. You can also use pixel values if you wish. Here is a code snippet to show this in action:

径向渐变中的色标类似于线性渐变。 观察到我还以百分比指定了圆心的位置。 您也可以根据需要使用像素值。 这是一个演示此操作的代码段：

.example {
        background: radial-gradient(
          circle closest-side at 20% 50%, yellow, red 70%, black
        );
    }

See the Pen [Radial Gradient with Color Stops][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [带有颜色停止点][Radial Gradient with Color Stops]的笔形[径向渐变][Radial Gradient with Color Stops] 。

## 重复渐变 **(**Repeating Gradients**)** ##

[Repeating gradients][] are similar to the other gradients and take the same arguments. The only difference is that they repeat the color stops infinitely. The positions of colors are shifted by multiples of the length of the basic gradient. As you will see, this repetition allows us to create complex patterns and backgrounds.

[重复渐变][Repeating gradients]与其他渐变相似，并且采用相同的参数。 唯一的不同是，它们会无限重复颜色停止。 颜色的位置偏移基本渐变长度的倍数。 如您所见，这种重复使我们能够创建复杂的图案和背景。

One point worth keeping in mind is that when you use multiple repeating gradients on the same element, the first gradient will appear on top. Naturally, this means that if every color of the first gradient is 100% opaque (i.e. no transparency) the other gradients in the stack will not be visible.

值得注意的一点是，当您在同一元素上使用多个重复渐变时，第一个渐变将出现在顶部。 自然地，这意味着如果第一个渐变的每种颜色都是100％不透明(即不透明)，则堆栈中的其他渐变将不可见。

## 重复线性渐变 **(**Repeating Linear Gradients**)** ##

To create a basic [repeating linear gradient][], we can do the following:

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

.example {
      background: repeating-linear-gradient(
        45deg, red, red 5px, white 5px, white 10px
      );
    }

See the Pen [Repeating Linear Gradient][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[重复线性渐变][Repeating Linear Gradient]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

To change color abruptly you have to specify two colors. To create a subtle pattern you just need to add another gradient the same way you would do multiple background images:

要突然更改颜色，您必须指定两种颜色。 要创建微妙的图案，您只需添加其他渐变即可，就像制作多张背景图片一样：

background:
      repeating-linear-gradient(
        -45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px,
        transparent 5px, transparent 10px
      ),
      repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.2),
        rgba(255, 0, 0, 0.2) 5px, white 5px, white 10px
      );

This time I made the gradient transparent instead of white. I suggest experimenting with different position of color stops and angles.

这次我使渐变透明而不是白色。 我建议尝试使用不同的色标和角度位置。

See the Pen [Repeating Linear Gradient with Multiple Gradients][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [用多个渐变][Repeating Linear Gradient with Multiple Gradients]的钢笔[重复线性渐变][Repeating Linear Gradient with Multiple Gradients] 。

## 重复径向渐变 **(**Repeating Radial Gradients**)** ##

[Repeating radial gradients][] are similar to standard radial gradients. Here is the code to create a simple repeating radial gradient:

[重复的径向渐变][Repeating radial gradients]类似于标准的径向渐变。 这是创建简单的重复径向渐变的代码：

.example {
      background: repeating-radial-gradient(
        circle, black, black 6px, red 6px, red 10px
      );
    }

See the Pen [Repeating Radial Gradient][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔[重复径向渐变][Repeating Radial Gradient] 。

You can also layer multiple repeating radial gradients, like this:

您还可以对多个重复的径向渐变进行分层，如下所示：

.example {
      background: 
       repeating-radial-gradient(
         farthest-corner at 10% 10%, rgba(0, 0, 0, 0.7),
         rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
       ),
       repeating-radial-gradient(
         closest-corner at 90% 90%, 
         rgba(0, 0, 0, 0.7), rgba(255, 0, 0, 0.2) 15px,
         rgba(255, 0, 0, 0.1) 25px
       ), 
       repeating-radial-gradient(
         farthest-corner at 10% 90%, rgba(0, 0, 0, 0.7),
         rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
       );
     }

See the Pen [Repeating Radial Gradient with Multiple Gradients][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [带有多个渐变][Repeating Radial Gradient with Multiple Gradients]的笔[重复径向渐变][Repeating Radial Gradient with Multiple Gradients] 。

## 结论 **(**Conclusion**)** ##

In this tutorial I have tried to cover every aspect of CSS gradients. Gradients can eliminate the need for using images in a lot of cases where you need simple patterns. Of course, while gradients do avoid the extra HTTP requests of images, they can still [cause problems with performance][], so they should be used with care.

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

> 翻译自: [https://www.sitepoint.com/css-gradients-a-syntax-crash-course/][https_www.sitepoint.com_css-gradients-a-syntax-crash-course]

css:好看的渐变色

[CSS gradients]: http://dev.w3.org/csswg/css-images-3/#gradients
[excellent browser support]: http://caniuse.com/#feat=css-gradients
[Linear gradients]: http://dev.w3.org/csswg/css-images-3/#linear-gradients
[Left to Right Linear Gradient]: http://codepen.io/SitePoint/pen/KpoJOV/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[Linear Gradients with Different Angles]: http://codepen.io/SitePoint/pen/jPzJOb/
[Linear Gradient with Color Stops]: http://codepen.io/SitePoint/pen/Qbmobj/
[Radial gradients]: http://dev.w3.org/csswg/css-images-3/#radial-gradients
[Radial Gradient Example]: http://codepen.io/SitePoint/pen/bdvZVG/
[Radial Gradients with Different Size Keyword Values]: http://codepen.io/SitePoint/pen/BNrbWy/
[Radial Gradient with Color Stops]: http://codepen.io/SitePoint/pen/jPzJmM/
[Repeating gradients]: http://dev.w3.org/csswg/css-images-3/#repeating-gradients
[repeating linear gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
[Repeating Linear Gradient]: http://codepen.io/SitePoint/pen/BNrbdN/
[Repeating Linear Gradient with Multiple Gradients]: http://codepen.io/SitePoint/pen/yNKwzb/
[Repeating radial gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient
[Repeating Radial Gradient]: http://codepen.io/SitePoint/pen/MwVxOv/
[Repeating Radial Gradient with Multiple Gradients]: http://codepen.io/SitePoint/pen/zGWbpW/
[cause problems with performance]: http://www.html5rocks.com/en/tutorials/speed/css-paint-times/
[https_www.sitepoint.com_css-gradients-a-syntax-crash-course]: https://www.sitepoint.com/css-gradients-a-syntax-crash-course/