【CSS 渐变Gradient详解】线性渐变、径向渐变、锥形渐变及重复渐变

最新推荐文章于 2024-05-08 16:09:38 发布
最新推荐文章于 2024-05-08 16:09:38 发布
阅读量1.2k 收藏 6
点赞数 9
分类专栏： CSS3 文章标签： css 前端 渐变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sonnenlicht77/article/details/134997677
版权

渐变 gradient

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients

CSS 属性值定义语法
https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle
https://developer.mozilla.org/zh-CN/docs/Web/CSS/image
https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-interpolation-method
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Types

  • <gradient> CSS 数据类型 是 <image> 的一种特殊类型，包含两种或多种颜色的过渡转变。
  • 渐变可以在任何使用 <image> 的地方使用，例如在背景中。
  • 渐变没有内在尺寸，实际大小取决于所应用的元素的大小。

线性渐变 🔗

由 linear-gradient()函数创建，在一个假想的直线上进行线性过渡的图像。

  • 💠 语法：linear-gradient( <angle>｜ to <side-or-corner> (可选) , <color-stop-list>);

    • background-image: linear-gradient(#8A2387, #E94057, #F27121);

  • 🤖 值详解

    • ✋🏻 <angle>｜ to <side-or-corner> (可选)

      👉🏻 默认情况下，线性渐变的方向是从上到下,可以指定一个值来改变渐变的方向。

      在这里插入图片描述

      • <side-or-corner> ：渐变线的起始点位置。

        • 如果指定了，则包含 to 和两个关键字：

          • 一个指定水平位置（left 或 right），另一个指定竖直位置（top 或 bottom）。
          • 关键词的先后顺序无影响。

        • 如果没有指定，则默认为 to bottom。

          • to top、to bottom、to left 和 to right 分别等价于
          • 0deg、180deg、270deg 和 90deg。其余值会被转换为角度。
              .bg-linear2 {
        background-image: linear-gradient(to right, #8A2387, #E94057, #F27121);
    }

    .bg-linear3 {
        background-image: linear-gradient(to left, #8A2387, #E94057, #F27121);
    }

    .bg-linear4 {
        background-image: linear-gradient(to top, #8A2387, #E94057, #F27121);
    }

    .bg-linear5 {
        background-image: linear-gradient(to bottom, #8A2387, #E94057, #F27121);
    }
    .bg-linear7 {
        background-image: linear-gradient(to bottom left, #8A2387, #E94057, #F27121);
    }

    .bg-linear8 {
        background-image: linear-gradient(to bottom right, #8A2387, #E94057, #F27121);
    }

    .bg-linear9 {
        background-image: linear-gradient(to top left, #8A2387, #E94057, #F27121);
    }

    .bg-linear10 {
        background-image: linear-gradient(to top right, #8A2387, #E94057, #F27121);
    }

              <div class="linear">
        <div class="box bg-linear1 ">默认</div>
        <div class="box bg-linear2">to right</div>
        <div class="box bg-linear3 ">to left</div>
        <div class="box bg-linear4 ">to top</div>
        <div class="box bg-linear5 ">to bottom</div>
    </div>
    <div class="linear">
        <div class="box bg-linear7 ">对角线:to bottom left</div>
        <div class="box bg-linear8 ">对角线:to bottom right</div>
        <div class="box bg-linear9 ">对角线:to top left</div>
        <div class="box bg-linear10 ">对角线:to top right</div>
    </div>

          在这里插入图片描述

      • <angle> 🔗：渐变线的方向的角度。

        • 0deg 等价于 to top，增加值相当于顺时针旋转。

          .bg-linear11 {
    background-image: linear-gradient(0deg, #8A2387, #E94057, #F27121);
}

.bg-linear12 {
    background-image: linear-gradient(45deg, #8A2387, #E94057, #F27121);
}

.bg-linear13 {
    background-image: linear-gradient(90deg, #8A2387, #E94057, #F27121);
}
.bg-linear133 {
    background-image: linear-gradient(90grad, #8A2387, #E94057, #F27121);
}
.bg-linear14 {
    background-image: linear-gradient(135deg, #8A2387, #E94057, #F27121);
}

.bg-linear15 {
    background-image: linear-gradient(0.25turn, #8A2387, #E94057, #F27121);
}

          <div class="linear">
    <div class="box bg-linear11 ">渐变角度：0deg</div>
    <div class="box bg-linear12 ">渐变角度：45deg</div>
    <div class="box bg-linear13 ">渐变角度：90deg</div>
    <div class="box bg-linear133 ">渐变角度：90grad</div>
    <div class="box bg-linear14 ">渐变角度：135deg</div>
    <div class="box bg-linear15 ">渐变角度：0.25turn</div>
</div>

          在这里插入图片描述

    • ✋🏻 <color-stop-list>:
      <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

      • <linear-color-stop> : 色标的 <color> 值，然后是一个或两个可选的色标位置（沿渐变轴的 百分比 或 绝对长度值）。
        • 💛 色标（color stop）: 要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标。
        • 至少指定两个色标，也可以指定任意数量。
        • 色标位置 ：可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。
          • 如果将位置设置为百分数，0% 表示起始点，而 100% 表示终点。
          • 如果有些位置不需要明确设置，那么将会自动计算，第一个色标在 0% 处，最后一个色标在 100%，其他的色标则位于其相邻的两个色标中间。
      • linear-color-hint : <length-percentage> 百分比（percentage）或长度（length）值。

        • 插值提示，定义渐变色在相邻色标之间的渐变过程。

        • 其中的长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。

          • 如果省略该值，颜色过渡的中点就是两个色标之间的中点。
              /* 指定色标 */
    /* 要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。 */
    .bg-linear16 {
        background-image: linear-gradient(#8A2387 10px, #E94057 10px 30px, #F27121 30px);
    }

    .bg-linear16-1 {
        background-image: linear-gradient(#8A2387 10px, #E94057 30px, #F27121 30px);
    }

    .bg-linear17 {
        background-image: linear-gradient(45deg, #8A2387 0 50%, #E94057 50% 70%, #F27121 0);
    }

    .bg-linear18 {
        background-image: linear-gradient(45deg, #8A2387 50%, #E94057 70%, #F27121);
    }

              <div class="box bg-linear16 ">
            <code>linear-gradient(#8A2387 10px, #E94057 10px 30px, #F27121 30px)</code>
        </div>
        <div class="box bg-linear16-1 ">
            <code>linear-gradient(#8A2387 10px, #E94057 30px, #F27121 30px)</code>
        </div>
        <div class="box bg-linear17 ">
            <code>linear-gradient(45deg, #8A2387 0 50%, #E94057 50% 70%, #F27121 0)</code>
        </div>
        <div class="box bg-linear18 ">
            <code>linear-gradient(45deg, #8A2387 50%, #E94057 70%, #F27121)</code>
    </div>

          在这里插入图片描述

  • 🥰 透明色 transparent 🔗:利用透明色的特性，结合background实现更多样式的图像。

            .bg-linear19 {
            background-image: linear-gradient(#8A2387, #E94057, #F27121, transparent);
        }

        .bg-linear20 {
            background-image: linear-gradient(#8A2387 0 5px, #E94057 5px 10%, transparent 50%, #F27121 50% 100%);
        }

        .bg-linear21 {
            background-image: linear-gradient(45deg, #8A2387 0 50%, #E94057 0);
        }

        .bg-linear22 {
            background-color: #ECEFF1;
            background-image: linear-gradient(0.125turn, transparent 75%, #F27121 75%);
            background-size: auto;
            background-position: top right;
            background-repeat: no-repeat;
        }
        /* 渐变叠加 */
        .bg-linear23 {
            background-image: linear-gradient(45deg, #8A2387 0 50%, transparent 0),
                linear-gradient(-45deg, #F27121 0 50%, transparent 0),
                linear-gradient(135deg, #E94057 0 50%, transparent 0),
                linear-gradient(-135deg, #76FF03 0 50%, transparent 0);
            background-blend-mode: saturation;
            background-size: 50% 50%;
            background-position: bottom left, bottom right, top left, top right;
            background-repeat: no-repeat;
        }

        .bg-linear24 {
            background-color: #ECEFF1;
            background-image: linear-gradient(45deg, transparent 50%, #8A2387 50%),
                linear-gradient(-45deg, transparent 50%, #8A2387 50%),
                linear-gradient(135deg, transparent 0 50%, #76FF03),
                linear-gradient(-135deg, transparent 0 50%, #76FF03);
            background-size: 50% 50%;
            background-position: bottom left, bottom right, top left, top right;
            background-repeat: no-repeat;
        }

            <div class="linear">
            <div class="box2 bg-linear19 ">
                <code>linear-gradient(#8A2387, #E94057, #F27121, transparent)</code>
            </div>
            <div class="box2 bg-linear20 ">
                <code>linear-gradient(#8A2387 0 5px, #E94057 5px 10%, transparent 50%, #F27121 50% 100%)</code>
            </div>

            <div class="box2 bg-linear21">
                <code>linear-gradient(45deg, #8A2387 0 50%, #E94057 0)</code>
            </div>
            <div class="box2 bg-linear22">
                <code>linear-gradient(0.125turn, transparent 75%, #F27121 75%)</code>
            </div>
            <div class="box2 bg-linear23">
                <code> linear-gradient(45deg, #8A2387 0 50%, transparent 0),
                    linear-gradient(-45deg, #F27121 0 50%, transparent 0),
                    linear-gradient(135deg, #E94057 0 50%, transparent 0),
                    linear-gradient(-135deg, #76FF03 0 50%, transparent 0);</code>
            </div>

            <div class="box2 bg-linear24">
            </div>
        </div>

    在这里插入图片描述

  • 🤔 小案例：电视没信号
    在这里插入图片描述

    <style>
        /* 案例 */
    .linear-demo {
        width: 300px;
        height: 600px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;

        --no-signal-w: calc(300px / 7);
        --no-signal-h: calc(var(--no-signal-w)*2);

        --signal-cr-w2: calc(var(--no-signal-w)*2);
        --signal-cr-w3: calc(var(--no-signal-w)*3);
        --signal-cr-w4: calc(var(--no-signal-w)*4);
        --signal-cr-w5: calc(var(--no-signal-w)*5);
        --signal-cr-w6: calc(var(--no-signal-w)*6);

    }

    .linear-demo div {
        width: 100%;
    }

    .linear-demo .no-signal1 {
        flex: 1;
        background-image: linear-gradient(to right, #cccccc var(--no-signal-w), #faf851 var(--no-signal-w) var(--signal-cr-w2), #6dfbfb var(--signal-cr-w2) var(--signal-cr-w3), #73f440 var(--signal-cr-w3) var(--signal-cr-w4), #eb58f6 var(--signal-cr-w4) var(--signal-cr-w5), #ea3732 var(--signal-cr-w5) var(--signal-cr-w6), #1d45f4 0);
    }

    .linear-demo .no-signal2 {

        height: var(--no-signal-w);
        background-image: linear-gradient(to right, #1d45f4 var(--no-signal-w), #000 var(--no-signal-w) var(--signal-cr-w2), #eb58f6 var(--signal-cr-w2) var(--signal-cr-w3), #000 var(--signal-cr-w3) var(--signal-cr-w4), #6dfbfb var(--signal-cr-w4) var(--signal-cr-w5), #000 var(--signal-cr-w5) var(--signal-cr-w6), #cccccc 0);

    }

    .linear-demo .no-signal3 {
        height: var(--no-signal-h);
        background-image: linear-gradient(to right, #e4e4e4, #181818 50%, #e4e4e4 50%, #181818);
    }

    .linear-demo .no-signal4 {
        height: var(--no-signal-h);
        background-color: #000;
        background-image: linear-gradient(to right, #000 10%, #2f2f2f 10% 20%, #5c5c5c 20% 30%, #737373 30% 40%, #b9b9b9 40% 45%, #fff 40% 50%, transparent 0)
    }
</style>
...
<div class="linear-demo">
    <div class="no-signal1"></div>
    <div class="no-signal2"></div>
    <div class="no-signal3"></div>
    <div class="no-signal4"></div>
</div>

❤️‍🔥 线性重复渐变 repeating-linear-gradient() 🔗

💚 repeating-linear-gradient() 创建一个能够重复填满容器的线性渐变。

  • 重复渐变的长度是第一个色标和最后一个色标之间的距离

  • 如果第一种颜色没有色标长度，则色标长度默认为 0。

  • 每次重复时，色标的位置都会以基本线性渐变长度的倍数移动。

  • 因此，每个结束色标的位置都会与起始色标的位置重合；

    • 如果色值不同，就会产生鲜明的视觉过渡。

      • 可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。
          .bg-linear25 {
        background-image: repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px);
    }

    .bg-linear26 {
        background-image: repeating-linear-gradient(45deg, #8A2387, #E94057 15%, #F27121 20%);
    }

    .bg-linear27 {
        background: repeating-linear-gradient(transparent, rgba(236, 64, 122, 0.5) 10px, transparent 10px 20px),
            repeating-linear-gradient(transparent, rgba(236, 64, 122, 0.8) 10px);
    }

          <div class="linear">
        <div class="box bg-linear25">
            <code>repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px)</code>
        </div>
        <div class="box bg-linear26">
            <code>repeating-linear-gradient(45deg, #8A2387, #E94057 15%, #F27121 20%)</code>
        </div>
        <div class="box bg-linear27">
            <code>repeating-linear-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 40px)</code>
        </div>
    </div>

      在这里插入图片描述

🤔 小案例：进度条

在这里插入图片描述

    <style>
        .progress-bar {
            width: 300px;
            height: 15px;
            border: 1px solid #cccccc;
            background-image: repeating-linear-gradient(45deg, transparent 0 5px, #F27121 5px 10px);
        }
    </style>
    ......
    ......
    <div class="progress-bar"></div>

径向渐变 🔗

由 radial-gradient() 函数创建，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。

🔸 径向渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

😶‍🌫️ radial-gradient(circle at center, red 0, blue, green 100%) 表示在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色

  • 💠 语法 : radial-gradient( [ <radial-gradient-syntax> ] )

    • radial-gradient() 函数接收一个 <radial-gradient-syntax> 参数。

    • <radial-gradient-syntax> = [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ,<color-stop-list>

      • [ <结束形状> || <大小> ]？[at <位置>]？,<色标列表>

径向渐变通过指定渐变的中心（0% 椭圆所在的位置）和结束形状（100% 椭圆）的大小和形状来指定。

  • 🤖 值详解：

    • <ending-shape> : 渐变结束时的形状。

      • 两个值 circle | ellipse
      • circle: 圆形，渐变的形状是一个半径不变的正圆
      • ellipse 椭圆，渐变形状是轴对称椭圆。
        -如果没有指定，默认为ellipse。
          .box {
        width: 300px;
        height: 100px;
        margin: 20px 0;
    }
    .box2 {
        width: 200px;
        height: 200px;
        margin: 20px 0;
    }

          <style>
        .bg-radial1 {
            background-image: radial-gradient(#8A2387, #E94057, #F27121);
        }

        .bg-radial2 {
            background-image: radial-gradient(#8A2387 10%, #E94057 30%, #F27121 70%);
        }

        .bg-radial3 {
            background-image: radial-gradient(circle, #8A2387 10%, #E94057 30%, #F27121 70%);
        }

        .bg-radial4 {
            background-image: radial-gradient(circle, #8A2387, #E94057, #F27121);
        }

        .bg-radial5 {
            background-image: radial-gradient(#8A2387 10%, 30%, #E94057 30% 70%, #F27121 70%);
        }

        .bg-radial6 {
            background-image: radial-gradient(circle, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0);
        }
    </style>
    ...
    <div class="radial">
        <!-- 没有指定 默认 ellipse-->
        <div class="box bg-radial1">
            <code>radial-gradient(#8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-radial2">
            <code>radial-gradient(#8A2387 10%, #E94057 30%, #F27121 70%)</code>
        </div>
        <!-- 结束形状为 circle -->
        <div class="box bg-radial3">
            <code>radial-gradient(circle, #8A2387 10%, #E94057 30%, #F27121 70%)</code>
        </div>
        <div class="box bg-radial4">
            <code>radial-gradient(circle, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-radial5">
            <code>radial-gradient(#8A2387 10%, 30%, #E94057 30% 70%, #F27121 70%)</code>
        </div>
        <div class="box bg-radial6">
            <code>radial-gradient(circle, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)</code>
        </div>
    </div>

      在这里插入图片描述

    • <size> :定义了渐变的尺寸。确定渐变结束形状的大小，它决定了渐变的大小如何相对于其容器。

      • 如果省略，则默认为最远角（farthest-corner）。

      • 它可以显式给出，也可以通过关键字给出。

        • 就关键字定义而言，渐变框边缘应视为向两个方向无限延伸，而不是有限线段。

      • 🍑 关键字

        关键字描述
        closest-side渐变结束形状如果是 圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。
        closest-corner渐变结束形状与容器距离渐变中心点最近的一个角相交。
        farthest-side类似于 closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。
        farthest-corner默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交。

      • 🍑 长度值和百分比

        • 🙌🏻 如果 ending-shape 被指定为 circle，则可以为大小指定一个长度值，它明确了圆的半径。负值是无效的。
        • 🙌🏻 如果 ending-shape 被指定为 ellipse，则可以使用带有两个值的长度或百分比来指定椭圆的大小。
          • 第一个值表示水平半径，第二个值表示垂直半径。
          • 百分比值是相对于渐变框在相应维度上的大小的。负值是无效的。
          • 🙌🏻 如果 ending-shape 关键词被省略，渐变形状会由给定的大小决定。
            • 一个 长度值 产生圆
            • 两个 长度或者百分比 单位的值产生椭圆。
            • 一个 百分比 值是无效的。
          <style>
      /* 显示的指定结束形状size:<length> 或者 <length-percentage>  */
      .bg-radial7 {
          background-image: radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0);
      }

      .bg-radial8 {
          background-color: #ECEFF1;
          background-image: radial-gradient(circle 40px, #8A2387 0 30px, #E94057 30px 40px, transparent 40px 100%)
      }

      /* 结束size 指定两个值 */
      .bg-radial9 {
          background-image: radial-gradient(40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0);
      }

      .bg-radial10 {
          background-color: #ECEFF1;
          background-image: radial-gradient(ellipse 40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0);
      }

      .bg-radial11 {
          background-image: radial-gradient(40% 40%, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0);
      }

      .bg-radial12 {
          background-image: radial-gradient(ellipse 40% 100px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }
  </style>
  ...
  <div class="radial">
      <div class="box bg-radial7">
          <code>radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>
      <div class="box bg-radial8">
          <code>radial-gradient(circle 40px, #8A2387 0 30px, #E94057 30px 40px, transparent 40px 100%)</code>
      </div>


      <div class="box bg-radial9">
          <code>radial-gradient(40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>
      <div class="box bg-radial10">
          <code>radial-gradient(ellipse 40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>

      <div class="box bg-radial11">
          <code>radial-gradient(40% 40%, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>
      <div class="box bg-radial12">
          <code>radial-gradient(ellipse 40% 100px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
  </div>
  <!-- 正方形 -->
  <div class="radial">
      <div class="box2 bg-radial7">
          <code>radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)</code>
      </div>
      <div class="box2 bg-radial8">
          <code>radial-gradient(circle 40px, #8A2387 0 30px, #E94057 30px 40px, transparent 40px 100%)</code>
      </div>
      <div class="box2 bg-radial9">
          <code>radial-gradient(40px, #8A2387 10% 30%, #E94057 30% 70%, #F27121 0)</code>
      </div>
      <div class="box2 bg-radial10">
          <code>radial-gradient(ellipse 40px 20px, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>
      <div class="box2 bg-radial11">
          <code>radial-gradient(40% 40%, #8A2387 10% 30%, #E94057 30% 100%, #F27121 0)</code>
      </div>
      <div class="box2 bg-radial12">
          <code>radial-gradient(ellipse 40% 100px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
  </div>

        在这里插入图片描述

          <style>
              /* size:为关键字 */
      .bg-radial13 {
          background-image: radial-gradient(closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial14 {
          background-image: radial-gradient(circle closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial15 {
          background-image: radial-gradient(closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial16 {
          background-image: radial-gradient(circle closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial17 {
          background-image: radial-gradient(farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial18 {
          background-image: radial-gradient(circle farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial19 {
          /* background-image: radial-gradient(#8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%); */
          background-image: radial-gradient(farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }

      .bg-radial20 {
          /* background-image: radial-gradient(circle, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%); */
          background-image: radial-gradient(circle farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
      }
  </style>
  ...
  <div class="radial">
      <div class="box2 bg-radial13">
          <code>radial-gradient(closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
      <div class="box2 bg-radial14">
          <code>radial-gradient(circle closest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>

      <div class="box2 bg-radial15">
          <code>radial-gradient(closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
      <div class="box2 bg-radial16">
          <code>radial-gradient(circle closest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>

      <div class="box2 bg-radial17">
          <code>radial-gradient(farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
      <div class="box2 bg-radial18">
          <code>radial-gradient(circle farthest-side, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>

      <div class="box2 bg-radial19">
          <code>radial-gradient(farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
      <div class="box2 bg-radial20">
          <code>radial-gradient(circle farthest-corner, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
      </div>
  </div>

        在这里插入图片描述

    • at <position>:position定义渐变的中心位置。没有指定，默认为center

      • position的值 ： 可以是任意合法的CSS定位值，百分比、像素值、关键字等
        • 如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心
          <style>
            /* at position:渐变中心 */
        .bg-radial21 {
            background-image: radial-gradient(at top, #8A2387, #E94057, #F27121);
        }

        .bg-radial22 {
            background-image: radial-gradient(40px at top left, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial23 {
            background-image: radial-gradient(closest-side at center, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial24 {
            background-image: radial-gradient(200px 100px at left top, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial25 {
            background-image: radial-gradient(200px 100px at bottom, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial26 {
            background-image: radial-gradient(200px 100px at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial27 {
            background-image: radial-gradient(circle at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }

        .bg-radial28 {
            background-image: radial-gradient(at 30px 30px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%);
        }
    </style>
    <div class="radial">
        <div class="box bg-radial21">
            <code>radial-gradient(at top, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-radial22">
            <code>radial-gradient(40px at top left, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial23">
            <code>radial-gradient(closest-side at center, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial24">
            <code>radial-gradient(200px 100px at left top, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial25">
            <code>radial-gradient(200px 100px at bottom, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial26">
            <code>radial-gradient(200px 100px at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial27">
            <code>radial-gradient(circle at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box bg-radial28">
            <code>radial-gradient(at 30px 30px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
    </div>

    <div class="radial">
        <div class="box2 bg-radial21">
            <code>radial-gradient(at top, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-radial22">
            <code>radial-gradient(40px at top left, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial23">
            <code>radial-gradient(closest-side at center, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial24">
            <code>radial-gradient(200px 100px at left top, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial25">
            <code>radial-gradient(200px 100px at bottom, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial26">
            <code>radial-gradient(200px 100px at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial27">
            <code>radial-gradient(circle at 30%, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
        <div class="box2 bg-radial28">
            <code>radial-gradient(at 30px 30px, #8A2387 0 30%, #E94057 30% 70%, #F27121 70% 100%)</code>
        </div>
    </div>

      在这里插入图片描述

    • color-stop-list : 和线性渐变值相似

❤️‍🔥 重复径向渐变 repeating-radial-gradient() 🔗

💚 repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的图形。

  • 它会在所有方向上无限重复色标，以覆盖其整个容器
        <style>
            /* 重复径向渐变 */
            .bg-radial29 {
                background-image: repeating-radial-gradient(#8A2387 0, #E94057, #F27121 30px);
            }

            .bg-radial30 {
                background-image: repeating-radial-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 30px);
            }

            .bg-radial31 {
                background-image: repeating-radial-gradient(circle at 50% 0, #8A2387 0, #E94057, #F27121 30px);
            }

            .bg-radial32 {
                background-image: repeating-radial-gradient(at bottom left, #8A2387 0, #E94057, #F27121 30px);
            }

            .bg-radial33 {
                background-image: repeating-radial-gradient(circle at bottom right, #8A2387 0, #E94057, #F27121 30px);
            }

            .bg-radial34 {
                background-image: repeating-radial-gradient(at top right, #8A2387 0, #E94057, transparent, #F27121 50%);
            }

            .bg-radial35 {
                background: repeating-radial-gradient(at top left, #E94057, #F27121 30%),
                    repeating-radial-gradient(at top right, #D3CCE3, #E9E4F0 10%),
                    repeating-radial-gradient(at bottom left, #2193b0, #6dd5ed 12.5%),
                    repeating-radial-gradient(at bottom right, #f5af19 0, transparent, #f5af19 45%);
                background-color: #6dd5ed;
                background-size: 50% 50%;
                background-position: bottom right, bottom left, top right, top left;
                background-repeat: no-repeat;
            }

            .bg-radial36 {
                background: repeating-radial-gradient(#000 0 5%, #fff 5% 10%);
            }
        </style>
        ...
        <div class="radial">
            <div class="box bg-radial29">
                <code>repeating-radial-gradient(#8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box bg-radial30">
                <code>repeating-radial-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 30px)</code>
            </div>
            <div class="box bg-radial31">
                <code>repeating-radial-gradient(circle at 50% 0, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box bg-radial32">
                <code>repeating-radial-gradient(at bottom left, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box bg-radial33">
                <code>repeating-radial-gradient(circle at bottom right, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box bg-radial34">
                <code>repeating-radial-gradient(at top right, #8A2387 0, #E94057, transparent, #F27121 50%)</code>
            </div>
            <div class="box bg-radial35">
                <code style="font-size: 9px;">
                    repeating-radial-gradient(at top left, #E94057, #F27121 30%),
                    repeating-radial-gradient(at top right, #D3CCE3, #E9E4F0 10%),
                    repeating-radial-gradient(at bottom left, #2193b0, #6dd5ed 12.5%),
                    repeating-radial-gradient(at bottom right, #f5af19 0, transparent, #f5af19 45%);
                </code>
            </div>
            <div class="box bg-radial36">
                <code style="background: #2196f3ad;">repeating-radial-gradient(#000 0 5%, #fff 5% 10%)</code>
            </div>
        </div>
        <div class="radial">
            <div class="box2 bg-radial29">
                <code>repeating-radial-gradient(#8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box2 bg-radial30">
                <code>repeating-radial-gradient(#8A2387 0 10px, #E94057 10px 20px, #F27121 20px 30px)</code>
            </div>
            <div class="box2 bg-radial31">
                <code>repeating-radial-gradient(circle at 50% 0, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box2 bg-radial32">
                <code>repeating-radial-gradient(at bottom left, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box2 bg-radial33">
                <code>repeating-radial-gradient(circle at bottom right, #8A2387 0, #E94057, #F27121 30px)</code>
            </div>
            <div class="box2 bg-radial34">
                <code>repeating-radial-gradient(at top right, #8A2387 0, #E94057, transparent, #F27121 50%)</code>
            </div>
            <div class="box2 bg-radial35">
                <code style="font-size: 9px;">
                    repeating-radial-gradient(at top left, #E94057, #F27121 30%),
                    repeating-radial-gradient(at top right, #D3CCE3, #E9E4F0 10%),
                    repeating-radial-gradient(at bottom left, #2193b0, #6dd5ed 12.5%),
                    repeating-radial-gradient(at bottom right, #f5af19 0, transparent, #f5af19 45%);
                </code>
            </div>
            <div class="box2 bg-radial36">
                <code style="background: #2196f3ad;">repeating-radial-gradient(#000 0 5%, #fff 5% 10%)</code>
            </div>
        </div>

在这里插入图片描述

锥形渐变 🔗

由 conic-gradient() 函数创建，创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。

😶‍🌫️ 锥形渐变的例子包括饼图和色轮，但是也可以用于创建棋盘格和其他有趣的效果。

🔸 锥形渐变的语法和径向渐变的语法类似，但是色标是围绕渐变弧（圆的圆周）进行的，而不是从渐变中心出现的渐变线上，并且色标是百分比或度数：绝对长度无效。

🔸 默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。
conic-gradient(#8A2387, #E94057, #F27121)
在这里插入图片描述

  • 💠 语法 : conic-gradient( [ <conic-gradient-syntax> ] )

    • conic-gradient()函数接受一个 <conic-gradient-syntax>参数

    • <conic-gradient-syntax> :

      [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

  • 🤖 值详解：

    • from <angle> : 定义了锥形渐变的角度起点，以角度作为单位（0 到 360）。

      • 默认值为 0，定义顺时针方向的渐变旋转。
      • <angle>的取值 🔗
        - deg : 度。一个完整的圆是 360deg。
        - grad : 百分度。一个完整的圆是 400grad。
        - rad : 弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度 => 180 deg = 1rad * π 。
        - turn : 圈数。一个完整的圆是 1turn。
        45deg = 50grad = 1/4π = 6.2832rad/8 = 1/8 turn
          <style>
        .bg-conic1 {
            background-image: conic-gradient(from 45deg, #8A2387, #E94057, #F27121);
        }

        .bg-conic2 {
            background-image: conic-gradient(from 50grad, #8A2387, #E94057, #F27121);
        }

        .bg-conic3 {
            background-image: conic-gradient(from calc(6.2832rad/8), #8A2387, #E94057, #F27121);
        }

        .bg-conic4 {
            background-image: conic-gradient(from 0.125turn, #8A2387, #E94057, #F27121);
        }

        .bg-conic5 {
            background-image: conic-gradient(from -0.125turn, #8A2387, #E94057, #F27121)
        }
    </style>
    <div class="conic">
        <div class="box bg-conic1">
            <code>conic-gradient(from 45deg, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic2">
            <code>conic-gradient(from 50grad, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic3">
            <code>conic-gradient(from calc(6.2832rad/8), #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic4">
            <code>conic-gradient(from 0.125turn, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic5">
            <code>conic-gradient(from -0.125turn, #8A2387, #E94057, #F27121)</code>
        </div>
    </div>
    <div class="conic">
        <div class="box2 bg-conic1">
            <code>conic-gradient(from 45deg, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic2">
            <code>conic-gradient(from 50grad, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic3">
            <code>conic-gradient(from calc(6.2832rad/8), #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic4">
            <code>conic-gradient(from 0.125turn, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic5">
            <code>conic-gradient(from -0.125turn, #8A2387, #E94057, #F27121)</code>
        </div>
    </div>

      在这里插入图片描述

    • at <position> : 定义了渐变的中心位置。这里的 <position> 可以是任意合法的CSS定位值，如百分比、像素值、关键字等。

      • 如果省略，默认值是 center，表示渐变是居中的。。
          <style>
        .bg-conic6 {
            background-image: conic-gradient(at top, #8A2387, #E94057, #F27121);
        }

        .bg-conic7 {
            background-image: conic-gradient(from 45deg at left, #8A2387, #E94057, #F27121);
        }

        .bg-conic8 {
            background-image: conic-gradient(from 45deg at 50% 30%, #8A2387, #E94057, #F27121);
        }

        .bg-conic9 {
            background-image: conic-gradient(from 45deg at 50px 50px, #8A2387, #E94057, #F27121);
        }
    </style>
    <div class="conic">
        <div class="box bg-conic6">
            <code>conic-gradient(at top, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic7">
            <code>conic-gradient(from 45deg at left, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic8">
            <code>conic-gradient(from 45deg at 50% 30%, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box bg-conic9">
            <code>conic-gradient(from 45deg at 50px 50px, #8A2387, #E94057, #F27121)</code>
        </div>
    </div>
    <div class="conic">
        <div class="box2 bg-conic6">
            <code>conic-gradient(at top, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic7">
            <code>conic-gradient(from 45deg at left, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic8">
            <code>conic-gradient(from 45deg at 50% 30%, #8A2387, #E94057, #F27121)</code>
        </div>
        <div class="box2 bg-conic9">
            <code>conic-gradient(from 45deg at 50px 50px, #8A2387, #E94057, #F27121)</code>
        </div>
    </div>

      在这里插入图片描述

    • <color-interpolation-method> 🔗（可选）

      • CSS 数据类型 <color-interpolation-method> 表示用于在 <color> 值之间插值的颜色空间。
      • <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
        • 指定了插值应使用直角坐标颜色空间还是带可选色相插值方法的极坐标颜色空间
      • in <rectangular-color-space> /* 或者 */ in <polar-color-space>[ <hue-interpolation method>]
      • 取值：

        • rectangular-color-space : 关键字 srgb、srgb-linear、lab、oklab(默认值)、xyz、xyz-d50 或 xyz-d65 之一。

          
<style>
    /*rectangular-color-space*/
    .bg-conic10 {
        background-image: conic-gradient(in srgb, blue, red);
    }

    .bg-conic11 {
        background-image: conic-gradient(in srgb-linear, blue, red);
    }

    .bg-conic12 {
        background-image: conic-gradient(in lab, blue, red);
    }

    .bg-conic13 {
        background-image: conic-gradient(in oklab, blue, red);
    }

    .bg-conic14 {
        background-image: conic-gradient(in xyz, blue, red);
    }

    .bg-conic15 {
        background-image: conic-gradient(in xyz-d50, blue, red);
    }

    .bg-conic16 {
        background-image: conic-gradient(in xyz-d65, blue, red);
    }
</style>
<div class="conic">
    <div class="box bg-conic10">
        <code>conic-gradient(in srgb, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic11">
        <code>conic-gradient(in srgb-linear, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic12">
        <code>conic-gradient(in lab, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic13">
        <code>conic-gradient(in oklab, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic14">
        <code>conic-gradient(in xyz, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic15">
        <code>conic-gradient(in xyz-d50, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box bg-conic16">
        <code>conic-gradient(in xyz-d65, #8A2387, #E94057, #F27121)</code>
    </div>
</div>
<div class="conic">
    <div class="box2 bg-conic10">
        <code>conic-gradient(in srgb, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic11">
        <code>conic-gradient(in srgb-linear, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic12">
        <code>conic-gradient(in lab, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic13">
        <code>conic-gradient(in oklab, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic14">
        <code>conic-gradient(in xyz, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic15">
        <code>conic-gradient(in xyz-d50, #8A2387, #E94057, #F27121)</code>
    </div>
    <div class="box2 bg-conic16">
        <code>conic-gradient(in xyz-d65, #8A2387, #E94057, #F27121)</code>
    </div>
</div>

          在这里插入图片描述

        • polar-color-space : 关键字 hsl、hwb、lch 或 oklch

        • hue-interpolation-method 🔗 可选 :用于色相插值的算法。默认为 shorter hue

          • [ shorter | longer | increasing | decreasing ] hue
              <style>
            /*in <polar-color-space>[ <hue-interpolation method>]*/
        /*  `polar-color-space` : 关键字 hsl、hwb、lch 或 oklch */
        .bg-conic17 {
            background-image: conic-gradient(in hsl, blue, red);
        }

        .bg-conic18 {
            background-image: conic-gradient(in hsl longer hue, blue, red);
        }

        .bg-conic19 {
            background-image: conic-gradient(in hsl increasing hue, blue, red);
        }

        .bg-conic20 {
            background-image: conic-gradient(in hsl decreasing hue, blue, red);
        }

        .bg-conic21 {
            background-image: conic-gradient(in hwb, blue, red);
        }

        .bg-conic22 {
            background-image: conic-gradient(in hwb longer hue, blue, red);
        }

        .bg-conic23 {
            background-image: conic-gradient(in hwb increasing hue, blue, red);
        }

        .bg-conic24 {
            background-image: conic-gradient(in hwb decreasing hue, blue, red);
        }

        .bg-conic25 {
            background-image: conic-gradient(in lch, blue, red);
        }

        .bg-conic26 {
            background-image: conic-gradient(in lch longer hue, blue, red);
        }

        .bg-conic27 {
            background-image: conic-gradient(in lch increasing hue, blue, red);
        }

        .bg-conic28 {
            background-image: conic-gradient(in lch decreasing hue, blue, red);
        }

        .bg-conic29 {
            background-image: conic-gradient(in oklch, blue, red);
        }

        .bg-conic30 {
            background-image: conic-gradient(in oklch longer hue, blue, red);
        }

        .bg-conic31 {
            background-image: conic-gradient(in oklch increasing hue, blue, red);
        }

        .bg-conic32 {
            background-image: conic-gradient(in oklch decreasing hue, blue, red);
        }
    </style>    
    <div class="conic">
        <div class="box bg-conic17">
            <code>conic-gradient(in hsl, blue, red)</code>
        </div>
        <div class="box bg-conic18">
            <code>conic-gradient(in hsl longer hue, blue, red)</code>
        </div>
        <div class="box bg-conic19">
            <code>conic-gradient(in hsl increasing hue, blue, red)</code>
        </div>
        <div class="box bg-conic20">
            <code>conic-gradient(in hsl decreasing hue, blue, red)</code>
        </div>


        <div class="box bg-conic21">
            <code>conic-gradient(in hwb, blue, red)</code>
        </div>
        <div class="box bg-conic22">
            <code>conic-gradient(in hwb longer hue, blue, red)</code>
        </div>
        <div class="box bg-conic23">
            <code>conic-gradient(in hwb increasing hue, blue, red)</code>
        </div>
        <div class="box bg-conic24">
            <code>conic-gradient(in hwb decreasing hue, blue, red)</code>
        </div>


        <div class="box bg-conic25">
            <code>conic-gradient(in lch, blue, red)</code>
        </div>
        <div class="box bg-conic26">
            <code>conic-gradient(in lch longer hue, blue, red)</code>
        </div>
        <div class="box bg-conic27">
            <code>conic-gradient(in lch increasing hue, blue, red)</code>
        </div>
        <div class="box bg-conic28">
            <code>conic-gradient(in lch decreasing hue, blue, red)</code>
        </div>


        <div class="box bg-conic25">
            <code>conic-gradient(in oklch, blue, red)</code>
        </div>
        <div class="box bg-conic26">
            <code>conic-gradient(in oklch longer hue, blue, red)</code>
        </div>
        <div class="box bg-conic27">
            <code>conic-gradient(in oklch increasing hue, blue, red)</code>
        </div>
        <div class="box bg-conic28">
            <code>conic-gradient(in oklch decreasing hue, blue, red)</code>
        </div>

    </div>

          在这里插入图片描述

    • angular-color-stop-list : 定义了一系列颜色及其在渐变中的位置。每个颜色后面跟着一个百分比或长度值来指定该颜色在渐变中出现的位置。

      • <angular-color-stop-list> = <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#

      • <angular-color-stop> : 色标（color stop）的 <color> 值，然后是一个或两个可选的色标位置（沿着渐变圆周轴的 <angle>）。

      • <color-hint> : 插值提示，定义了在相邻色标之间的渐变如何进行。

        • 这个长度定义了渐变色应在两个色标之间的哪一点到达颜色过渡的中点。
        • 如果省略，颜色过渡的中点是两个色标之间的中点。
          <style>
        /* 色标 */
        .bg-conic33 {
            background-image: conic-gradient(from 65deg at bottom left, #8A2387, #E94057, #F27121 33deg);
        }

        .bg-conic34 {
            background-image: conic-gradient(from 60deg at left center, #8A2387 20deg, #E94057 30deg, #F27121 60deg);
        }

        .bg-conic35 {
            background-image: conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
                    green 45deg 110deg, blue 110deg 200deg, purple 200deg);
        }

        .bg-conic36 {
            border: 1px solid #000;
            box-sizing: border-box;
            background-image: conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn, #fff 181deg 270deg, #000 271deg 360deg);
            background-size: 25px 25px;

        }
    </style>
    <div class="conic">
        <div class="box bg-conic33 ">
            <code>conic-gradient(from 65deg at bottom left, #8A2387, #E94057, #F27121 33deg)</code>
        </div>
        <div class="box bg-conic34 ">
            <code>conic-gradient(from 60deg at left center, #8A2387 20deg, #E94057 30deg, #F27121 60deg)</code>
        </div>
        <div class="box bg-conic35 ">
            <code>conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
                green 45deg 110deg, blue 110deg 200deg, purple 200deg)</code>
        </div>
        <div class="box bg-conic36 ">
            <code style="background-color: #1d45f497;">conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn, #fff
                181deg
                270deg, #000 271deg 360deg)</code>
            <br>
            <code style="background-color: #1d45f497;">background-size: 25px 25px;</code>
        </div>
    </div>


    <div class="conic">
        <div class="box2 bg-conic33 ">
            <code>conic-gradient(from 65deg at bottom left, #8A2387, #E94057, #F27121 33deg)</code>
        </div>
        <div class="box2 bg-conic34 ">
            <code>conic-gradient(from 60deg at left center, #8A2387 20deg, #E94057 30deg, #F27121 60deg)</code>
        </div>
        <div class="box2 bg-conic35" style="border-radius: 50%;">
            <code style="background-color: #1d45f497;">conic-gradient(red 6deg, orange 6deg 18deg, yellow 18deg
                45deg,
                green 45deg 110deg, blue 110deg 200deg, purple 200deg)</code>
        </div>
        <div class="box2 bg-conic36 ">
            <code style="background-color: #1d45f497;">conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn, #fff
                181deg
                270deg, #000 271deg 360deg)</code>
            <br>
            <code style="background-color: #1d45f497;">background-size: 25px 25px;</code>
        </div>
    </div>

      在这里插入图片描述

❤️‍🔥 重复锥形渐变 repeating-conic-gradient() 🔗

💚 repeating-conic-gradient 是 CSS3 中的一个函数，用于创建重复的圆锥渐变。这种类型的渐变可以用于创建环状、螺旋状或其他基于角度的颜色过渡效果。

  • 与线性渐变和径向渐变不同，圆锥渐变是沿着一个角度或方向进行的，并且颜色在每个 360 度周期内都会重复。

          <style>
          .bg-conic37 {
              border: 1px solid #000;
              box-sizing: border-box;
              background-image: repeating-conic-gradient(#fff 0 0.25turn, #000 91deg 0.5turn);
              background-size: 25px 25px;
          }
      </style>
      <div class="conic">
              <div class="box bg-conic37">
                  <code style="background-color: #1d45f497;">repeating-conic-gradient(#fff 0 0.25turn, #000 91deg
                      0.5turn)</code>
              </div>
              <div class="box2 bg-conic37">
                  <code style="background-color: #1d45f497;">repeating-conic-gradient(#fff 0 0.25turn, #000 91deg
                      0.5turn)</code>
              </div>
      </div>

    在这里插入图片描述

      <style>
          .bg-conic38 {
              background-image: repeating-conic-gradient(red 0%, yellow 15%, red 33%);
          }

          .bg-conic39 {
              background-image: repeating-conic-gradient(from 45deg at 10% 50%,
                      brown 0deg 10deg,
                      darkgoldenrod 10deg 20deg,
                      chocolate 20deg 30deg);
          }

          .bg-conic40 {
              background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
          }

          .bg-conic41 {
              background-image: repeating-conic-gradient(in hsl longer hue,
                      red,
                      blue 180deg);
          }

          .bg-conic42 {
              background-image: repeating-conic-gradient(from 3deg at 25% 25%,
                      green,
                      blue 2deg 5deg,
                      green,
                      yellow 15deg 18deg,
                      green 20deg);
          }
  </style>
      <div class="conic">
          <div class="box2 bg-conic38">
              <code>repeating-conic-gradient(red 0%, yellow 15%, red 33%)</code>
          </div>
          <div class="box2 bg-conic39">
              <code>repeating-conic-gradient(from 45deg at 10% 50%,
                  brown 0deg 10deg,
                  darkgoldenrod 10deg 20deg,
                  chocolate 20deg 30deg)</code>
          </div>
          <div class="box2 bg-conic40">
              <code>repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg)</code>
          </div>
          <div class="box2 bg-conic41">
              <code>rrepeating-conic-gradient(in hsl longer hue,
                  red,
                  blue 180deg)</code>
          </div>
          <div class="box2 bg-conic42">
              <code>repeating-conic-gradient(from 3deg at 25% 25%,
                  green,
                  blue 2deg 5deg,
                  green,
                  yellow 15deg 18deg,
                  green 20deg)</code>
          </div>
      </div>

    在这里插入图片描述

起伏羊
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css之线性渐变
A123ppleQueen的博客
11-12 6035
1.头部到底部 至少两种颜色，多了不限 background-image: linear-gradient(颜色1，颜色2.....); 代码如下 <!DOCTYPE html> <html lang="en"> <head> <style> #d1{ width:400px; height:400px; background-image: linear-gradient(pink,skyblue,gold); } <...
CSS 实现渐变效果: linear-gradient线性渐变 和 radial-gradient径向渐变 总结记录
♡ 脚下的每一步都叫远方 ♡
04-15 301
文章目录线性渐变( linear-gradient )径向渐变( radial-gradient ) 线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90de...
css中的渐变色
ccattempt的博客
02-21 7990
简单介绍渐变色和阴影 目录1、径向渐变2、径向渐变参考文献 1、径向渐变 径向渐变使用linear-gradient，语法如下： background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...); 渐变方向有以下几种值： 使用表示方位的单词 to top 表示从下往上的方式进行渐变 to bottom 表示从上往下的方式进行渐变 to right 表示从左往右的方式进行渐变 to left 表示从右往左的方.
利用css实现渐变色(通俗易懂)
热门推荐
DZQ1223的博客
07-07 3万+
类型语法线性渐变linear-gradient(方向, 颜色1, 颜色2, … ,颜色n)径向渐变radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, …
前端css中径向渐变(radial-gradient)的使用
最新发布
小蜗牛764号的博客
05-08 1462
radial-gradient径向渐变可以在网页的元素上创建一个从中心点往外的圆形或椭圆形的颜色渐变。常配合背景图片background-image进行使用。基本上能添加背景图片效果的元素组件，如按钮、标签、模型背景、文字等都可以添加径向渐变的效果。径向渐变可以理解为给背景添加图片的效果，图片不能够直接使用动画效果animation进行动画效果过渡转变的。本文只是简单说一下渐变的各种语法属性。没有专门对元素组件如按钮、标签、窗体背景、文本等举例使用。
css：CSS 线性渐变linear-gradient
彭世瑜的博客
06-05 2281
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。文档。
css背景渐变属性之径向渐变
aibai666的博客
12-12 7681
CSS实现径向渐变的效果，普通的径向渐变和重复的径向渐变
CSS之多背景的设置以及线性渐变与径向渐变
dwjdj的博客
01-20 542
多背景 可以给一个容器同时设置多张背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; paddin...
深入剖析CSS中的线性渐变linear-gradient
09-24
【线性渐变详解】 线性渐变在CSS3中是一种强大的工具，允许开发者创建颜色平滑过渡的效果，显著提升了网页设计的灵活性和表现力。线性渐变（linear-gradient）是通过一条直线来实现颜色的过渡，这条线称为渐变线。...
CSS3中颜色线性渐变实战
09-25
在CSS3中，实现线性渐变主要通过`linear-gradient`函数。 首先，基本的线性渐变语法如下： ```css background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 这里的`direction`指定了渐变的...
纯css3 gradient属性制作6种渐变色的按钮样式
11-05
三、径向渐变（Radial Gradient） 径向渐变从一个中心点向外扩散，可以创建出类似光晕的效果。基本语法如下： ```css button { background-image: radial-gradient(circle, red, blue); /* 其他按钮样式 */ } ```...
CSS3 渐变（Gradients）之CSS3 线性渐变
09-27
CSS3 渐变分为线性渐变和径向渐变两种类型。本篇文章将重点介绍CSS3线性渐变。 线性渐变（Linear Gradients）是沿着一条直线的方向进行颜色过渡。它们可以是垂直的、水平的，或者沿着任何对角线方向。线性渐变的...
CSS学习笔记之可重复渐变（repeating-linear-gradient）
09-27
主要给大家介绍了关于CSS中可重复渐变（repeating-linear-gradient）的相关资料，文中介绍的非常详细，对大家学习或者使用css具有一定的参考学习价值，需要的朋友们下面一起来看看吧。
CSS之渐变
weixin_45604020的博客
07-12 2114
渐变被用于很场景，最常见的是给图片添加渐变背景色，目的是突出图片上的文字，让文字看起来更加清晰。
CSS基础学习--26 渐变（Gradients）
yyxhzdm的博客
06-24 3282
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS之实现线性渐变背景
weixin_43599321的博客
10-15 3093
`background: linear-gradient`是CSS中用于创建**线性渐变**背景的属性，这个属性允许你定义一个在元素的背景中进行渐变的效果，可以从一个颜色过渡到另一个颜色。
CSS 径向渐变
haoyanyu_的博客
05-08 803
2. 如果第二个值是数字或百分比，则它是第一个值的偏移量，如果是第三个值，则是第二个值的偏移量。两个百分比：ending-shape省略时，表示椭圆的大小，第一个水平半径，第二个垂直半径。一个数字：如果ending-shape指定为圆形时，此值表示半径。两个值：一个是x坐标，一个是y坐标，可以是关键词，可以像素数，可以是百分比。：渐变结束的形状 默认为椭圆ellipse，可以设置为圆形circle。四个值：第一个和第三个是定义xy的关键词，第二个和第四个是偏移量。：径向渐变开始的位置，默认是中心点。
CSS渐变属性——线性渐变
aibai666的博客
12-10 3773
在实际开发中，一个好的视觉效果可以更好的达到修饰网页的效果。而渐变背景在web页面中则是必不可少的。 css中的渐变类型定义了两种，线性渐变和径向渐变，本次简单的介绍线性渐变。 语法格式: background:linear-gradient(渐变方向,渐变的颜色) 使用线性渐变用到的是background的linear-gradient方法 渐变方向的确定有关键字确定和角度确定。 关键字的取值:to right（表示从左往右渐变） to left(表示从右往左渐变) to top(表示从

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

起伏羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值