CSS - 渐变

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

什么是 CSS 渐变？

在 CSS 中，渐变是一种特殊的用户定义图像，可用于元素的背景或边框。
我们可以使用函数gradient(type, color1, color2, color3);将渐变设置为任何 HTML 元素的 background 属性。
缩放图像渐变不会降低其质量，因为这些是由浏览器根据开发人员代码定义的。

CSS 渐变的类型

CSS 定义了三种类型的渐变

线性渐变：从左到右、从上到下或对角线过渡。
径向渐变：从中心到边缘过渡。
圆锥渐变：围绕中心点旋转。

选择背景渐变

线性渐变

线性渐变创建一条沿单个方向流动的颜色带，即从左到右、从上到下或任何角度。

语法

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);

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

示例

为了创建基本的线性渐变，您只需要两种颜色，称为颜色停止点。您必须至少有两个，但也可以有两个以上。

以下示例演示了这一点

<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-gradient(shape size position, color1, color2..);

形状参数定义渐变的形状（圆形或椭圆形）。
大小参数指定形状的大小。
位置参数设置渐变的中心。

示例

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

让我们看一个例子

<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>

圆锥渐变

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

语法

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

位置（可选）：指定渐变起点的位置。可以是百分比或像 center 这样的关键字。
角度（可选）：以度为单位指定渐变的起始角度。
颜色列表：定义渐变中的颜色及其位置。

示例

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

<!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>

边框渐变

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

语法

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

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

示例

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

<!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>

颜色停止定位

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

语法

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

向右：指定渐变的方向。
红色 10%：将红色设置为在渐变的 10% 处停止。
粉色 30%：将粉色设置为在渐变的 30% 处停止。
蓝色 60%：将蓝色设置为在渐变的 60% 处停止。

示例

<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>

创建硬线

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

示例

在这个例子中，我们将使用渐变函数创建硬线。

<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>

使用渐变创建颜色带

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

语法

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

示例

在这个例子中，我们将创建一个多色颜色带。

<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>

堆叠渐变

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

示例

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

<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>

渐变类型	描述	示例
linear-gradient()	一种渐变类型，其中颜色在一条直线上从一个点过渡到另一个点。	试试看
radial-gradient()	由颜色从中心点向外辐射组成的渐变类型。	试试看
conic-gradient()	一种渐变类型，其中颜色以圆形或圆锥形图案排列。	试试看
repeating-linear-gradient()	允许您创建在指定方向上重复的线性渐变图案。	试试看
repeating-radial-gradient()	允许您创建重复的径向渐变图案。	试试看
repeating-conic-gradient()	允许您创建重复的圆锥渐变图案。	试试看