Css 简明教程

CSS - Gradients

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

What is CSS Gradient?

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

Types of CSS Gradients

CSS 定义了三种类型的渐变

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

Linear Gradients

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

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 参数指定了渐变的角度或方向（[向左 | 向右] || [向上 | 向下]）。

Example

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

以下示例演示了这一点：

<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 是一种由从中心点向外辐射颜色的渐变类型。

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

Syntax

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

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

Example

为了创建基本的径向渐变，您只需要两种颜色。渐变的中心位于 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>

Conic Gradients

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

Syntax

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

position （可选）：指定渐变的起始点位置。它可以是百分比或关键字，例如中心。
angle （可选）：以度为单位指定渐变的起始角度。
color-list ：定义渐变中的颜色及其位置。

Example

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

<!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 渐变也可用于创建花式边框。您可以在各种宽度的渐变中使用渐变来创建边框图案中的效果。

Syntax

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

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

Example

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

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

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

Syntax

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

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

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 渐变中仔细定位颜色停止点来实现此效果。查看以下示例

Example

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

<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

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

Syntax

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

Example

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

<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

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

Example

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

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