Css 简明教程

CSS - Gradients

CSS gradients 允许通过在两种或多种颜色之间创建平滑过渡，为 HTML 元素设计自定义颜色。

CSS gradients allows to design custom colors for HTML elements by creating a smooth transition between two or more colors.

What is CSS Gradient?

In CSS, gradient is a special type of user defined images that can be used for background or borders of element.
We can set a gradient to background property of any HTML elements using function gradient(type, color1, color2, color3);
Zooming a image gradient does not loose it’s quality as this are defined by browsers according to developers code.

Types of CSS Gradients

CSS 定义了三种类型的渐变

CSS defines three types of gradients

*Linear Gradient: * Goes from left to right, up to down or diagonally.
*Radial Gradient: * Start from center to edges.
*Conic Gradient: * Revolve around a center point.

Linear Gradients

linear gradient 创建一个沿单个方向（即从左到右、从上到下或任意角度）流动的色带。

The linear gradient creates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle.

Syntax

linear-gradient(direction, color1, color2, ...);

/* Gradient from bottom right to top left */
linear-gradient(to top left, color1, color2, ...);

/* Gradient at an angle 45 degree */
linear-gradient(45deg, red, yellow);

direction 参数指定了渐变的角度或方向（[向左 | 向右] || [向上 | 向下]）。

The direction parameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient.

Example

为了创建一个基本的线性渐变，您只需要两种颜色，它们称为 color stops 。您必须至少有两个，但也可以有多个。

In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well.

以下示例演示了这一点：

Following example demonstrates this:

<html>
<head>
   <style>
      div {
         height: 70px;
         width: 100%;
      }
      .topBottom {
         background: linear-gradient(green, yellow);
      }
      .RightLeft{
         background: linear-gradient(to right, green, yellow);
      }
   </style>
</head>

<body>
   <h1>Linear gradient</h1>
   <h3>Top to Bottom ( Default )</h3>
         <div class="topBottom"></div>
   <h3>Right to left</h3>
         <div class="RightLeft"></div>
</body>
</html>

Radial Gradients

radial gradient 是一种由从中心点向外辐射颜色的渐变类型。

A radial gradient is a type of gradient that consists of colors radiating outward from a central point.

在径向渐变中，颜色在圆形或椭圆形图案中从中心的一种颜色平滑过渡到外边缘的另一种颜色。

In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern.

Syntax

radial-gradient(shape size position, color1, color2..);

The shape parameter defines the shape of the gradient (circle or ellipse).
The size parameter specifies the size of the shape.
The position parameter sets the center of the gradient

Example

为了创建基本的径向渐变，您只需要两种颜色。渐变的中心位于 50% 50% 标记处，默认情况下；其中渐变是椭圆形的，与它的框的纵横比相匹配。

In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box.

我们看一个示例：

Let us see an example:

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .gradient {
         background: radial-gradient(green, yellow);
      }
      .center-gradient {
         background:
            radial-gradient(
               at 0% 50%,
               green 30px,
               yellow 60%,
               magenta 20%
            );
      }
   </style>
</head>

<body>
   <h1>Radial gradient</h1>
   <h3>Simple Radial Gradient</h3>
       <div class="gradient"></div>

   <h3>Center Positioned Radial Gradient</h3>
       <div class="center-gradient"></div>
</body>
</html>

Conic Gradients

conic gradient ，也称为圆锥渐变或角度渐变，是一种渐变，其中颜色的排列呈圆形或圆锥形图案，从 360 度弧的中心点向外辐射。

A conic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc.

Syntax

conic-gradient(from 'angle' at 'position', 'color-list')

position (optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center.
angle (optional): Specifies the starting angle of the gradient in degrees.
color-list : Defines the colors and their positions in the gradient.

Example

在这个示例中，我们将创建一个具有四种不同颜色的圆锥渐变饼图，然后将渐变对齐在图表中的不同位置。

In this example we will create a conic gradient pie chart with four different colors, then align gradient at different locations of diagram.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div {
         height: 80px;
         width: 110px;
         border-radius: 50%;
      }
      .gradient1{
         background: conic-gradient(
                        from 45deg at 50% 50%,
                        red, yellow, green,
                        blue, red);
      }
      .gradient2{
         background: conic-gradient(
                        from 45deg at 20% 40%,
                        red, yellow, green,
                        blue, red);
      }
    </style>
</head>

<body>
    <h1>Conic Gradient Example</h1>
    <h3>Align at center</h3>
        <div class="gradient1"></div>
    <h3>Align at 20-40</h3>
        <div class="gradient2"></div>
</body>
</html>

Gradients for Borders

CSS 渐变也可用于创建花式边框。您可以在各种宽度的渐变中使用渐变来创建边框图案中的效果。

The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns.

Syntax

border-image: linear-gradient('color-list')

您还可以对边框使用径向和圆锥渐变。

You can also use radial and conical gradients for borders.

Example

以下是一个在边框创建中使用渐变的示例：

Here is an example of use of gradients in creation of borders:

<!DOCTYPE html>
<html lang="en">
<head>
      <style>
         .gradient-border {
            height: 200px;
            width: 200px;
            border: 10px solid;
            border-image: linear-gradient(
                              to right,
                              red, yellow,
                              green, blue) 1;
         }
      </style>
</head>
<body>
      <h2>Gradient Border </h2>
      <div class="gradient-border"></div>
</body>
</html>

Positioning Color Stops

对渐变定位颜色停止点允许控制渐变发生过渡的点。

Positioning color stops for gradient allows to control the point at which transition occur for a gradient.

Syntax

linear-gradient(to right, red 10%, pink 30%, blue 60%)

*to right: *Specifies the direction of gradient.
*red 10%: *Sets the red color to stop at 10% of the gradient
*pink 30%: *Sets the pink color to stop at 30% of the gradient.
*blue 60%: *Sets the blue color to stop at 60% of the gradient.

Example

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .linear-position {
         background: linear-gradient(to right,
                        blue 15px, magenta 33%,
                        red 66%, yellow 60%,
                        orange 100%);
      }
   </style>
</head>

<body>
   <div class="linear-position"></div>
</body>
</html>

Creating Hard Lines

可以在两种颜色之间创建一条硬线，从而看不到平滑过渡。可以通过在 CSS 渐变中仔细定位颜色停止点来实现此效果。查看以下示例

A hard line can be created in between two colors, such that no smooth transition can be seen. This effect can be achieved by carefully positioning color stops in CSS gradients. Check out following example

Example

在这个示例中，我们将使用渐变功能创建硬线。

In this example we will create hard line using gradient function.

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100px;
         display: inline-block;
         text-align: center;
         margin: 5px;
      }

      .linear-hard-line {
         background: linear-gradient(to top right,
                           green 50%, orange 50%);
      }
   </style>
</head>
<body>
   <div class="linear-hard-line"></div>
</body>
</html>

Color Bands Using Gradients

为了创建条纹效果，每种颜色的第二个颜色停止点都设置在相邻颜色第一个颜色停止点的位置。

In order to create a striped effect, the second color stop for each color is set at the same location as the first color stop for the adjacent color.

Syntax

linear-gradient(to right, red 10%,
               pink 10% 30%,
               blue 60% 80%,
               yellow 80%);

Example

在此示例中，将创建一个多色色带。

In this example will create a multi colored color band.

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .linear-gradient-stripes {
         background: linear-gradient(
                     to right,
                     green 20%,
                     lightgreen 20% 40%,
                     orange 40% 60%,
                     yellow 60% 80%,
                     red 80%);
      }
   </style>
</head>
<body>
   <div class="linear-gradient-stripes">
   </div>
</body>
</html>

Stacked Gradients

一个渐变可以堆叠在其他渐变之上。只要确保顶部的渐变不完全的不透明，这样就可以看到它下面的渐变。

One gradient can be stacked over other gradients. Just make sure the gradient at the top should not be completely opaque, so that the gradients below it can be seen.

Example

让我们看一个堆叠渐变的示例。

Lets see an example of stacked gradients.

<html>
<head>
   <style>
      div {
         height: 200px;
         width: 100%;
      }
      .stacked-linear {
         background:
            linear-gradient(90deg, green, yellow),
            linear-gradient(220deg, white 70.71%, black 38%),
            linear-gradient(217deg, orange, grey 70.71%);
      }
   </style>
</head>

<body>
   <div class="stacked-linear">
   </div>
</body>
</html>