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

最新推荐文章于 2024-04-26 16:58:59 发布
最新推荐文章于 2024-04-26 16:58:59 发布
阅读量1.3k 收藏 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渐变详解：线性、径向、锥形
大剑师兰特的GIS世界
04-19 1040
CSS 渐变是一种强大的设计工具，允许开发人员在网页元素上创建平滑的颜色过渡效果，从而增强视觉体验，减少对外部图像资源的依赖，并提高性能。CSS 渐变主要分为三种类型：线性渐变（Linear Gradients）、径向渐变（Radial Gradients）和 锥形渐变（Conic Gradients）。
CSS渐变背景色，这一篇就够了（附代码案列讲解）
(黎子)人生编码
06-20 2474
CSS渐变背景色是一种流行的网页设计技巧，它可以使网页元素的外观更加丰富和吸引人。渐变可以是线性的、径向的，甚至可以是复杂的多色渐变。本文将介绍如何使用CSS创建各种渐变背景色，并提供示例代码和效果展示。
深入探索CSS中的渐变艺术：线性渐变、径向渐变与锥形渐变详解
艾恩小灰灰的博客
04-26 670
CSS渐变技术为网页设计带来了无尽的可能性，通过合理地运用线性渐变、径向渐变和锥形渐变，可以增强网页元素的视觉表现力，创造出生动多彩的用户体验。随着浏览器对CSS标准支持的不断升级，渐变效果的应用将更加广泛和灵活。记得在实际项目中检查浏览器兼容性，并根据需要添加相应的前缀以确保跨浏览器兼容。
CSS3径向渐变radial-gradient详解
热门推荐
巧克力很苦的小博客
04-22 1万+
上一章我们详细讲解的linear-gradient线性渐变，来现在我们来讲解radial-gradient径向渐变 CSS3径向渐变radio-gradient 1、语法 径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下： background: radial-gradient(center, shape, siz...
CSS线性渐变和径向渐变详解
xu_yuxuyu的博客
11-04 5927
html零基础必看——html入门，编程就是如此简单 第九章：渐变色1.线性渐变1.1.什么是线性渐变1.2线性渐变的写法2.径向渐变2.1什么是径向渐变2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变 线性渐变，顾名思义就是以某条直线边开始沿着某个方向的渐变。 属性是background，给背景的渐变色。 属性值是linear-gradient（），是一个函数，（）里面写需要渐变的颜色； 创建一个线性渐变，需指定两种及两种以上的颜色进行一个平滑过渡形成的渐变色，可以实现从不同方向、不同角
css实现径向和线性渐变,CSS3的渐变属性 线性渐变 径向渐变 重复线性渐变和径向渐变...
weixin_35487052的博客
08-03 445
在CSS3之前，如果需要添加界面效果，通常要设置背景图像来实现。在CSS3中增加了渐变属性，通过渐变属性，也可以轻松的实现界面效果。CSS3的界面效果属性主要包括线性渐变、径向渐变。CSS3设置线性渐变在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值)”样式可以实现线性渐变效果。它的基本语法格式...
html5css重复径向渐变,CSS3怎么实现重复径向渐变效果
weixin_33226548的博客
06-15 1228
CSS3实现重复径向渐变效果的方法：首先创建一个HTML示例文件；然后在body中创建一个div；最后通过“repeating-radial-gradient”属性实现重复径向渐变效果即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。css3中的渐变效果，包括线性渐变、径向渐变、重复线性渐变以及重复径向渐变。这些渐变效果，可以使我们的网页内容更...
CSS之实现线性渐变背景
weixin_43599321的博客
10-15 3392
`background: linear-gradient`是CSS中用于创建**线性渐变**背景的属性，这个属性允许你定义一个在元素的背景中进行渐变的效果，可以从一个颜色过渡到另一个颜色。
css：CSS 线性渐变linear-gradient
彭世瑜的博客
06-05 2313
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。文档。
CSS3线性渐变linear-gradient
XUYIGE的博客
11-20 849
渐变就是从一种颜色过渡到另一种颜色的填充过程，两种颜色相交时会进行混合，渐变的类型有两种： 1、线性渐变（linear）：通过linear-gradient函数定义 2、径向渐变（radial）：通过radial-gradient函数定义 语法： 线性渐变：background：linear-gradient（方向，颜色，…) 重复线性渐变：repeating-linear-gradient（方向...
深入剖析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 背景详解】background
羊羊羊羊羊羊羊的博客
12-11 2351
设置元素的背景颜色。属性的值为颜色值或关键字"transparent"二者选其一。
盒模型（Boxmodel）
羊羊羊羊羊羊羊的博客
01-14 2189
盒模型 知识点 理解W3C标准盒模型 理解并掌握盒模型相关属性的使用方法 了解CSS盒模型的浏览器兼容性 掌握浮动布局的设计与使用方法 掌握各种页面元素的定位方法 掌握CSS3新增的相关属性的使用方法及兼容性 一、W3C标准盒模型 1、什么是盒模型 盒模型是使用css对网页元素进行控制时的一个概念，浏览器把网页中的每一个元素都看作一个盒模型，每个盒模型都由以下几...
【CSS @property】CSS自定义属性说明与demo
羊羊羊羊羊羊羊的博客
12-20 1829
property是 CSS Houdini API [🔗] 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承**。@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性，就像 【】 函数被使用同样的参数调用了一样。在过去，我们使用CSS自定义变量（CSS Variables）来存储和复用值，但它们并不具备类型检查和默认值设定的功能。
css重复的线性渐变
最新发布
07-11
CSS中的重复线性渐变是指通过设置`background-image`属性，使用`linear-gradient()`函数创建一条渐变，并指定其是否以及如何重复。你可以选择重复渐变的方向（水平、垂直、repeat-x、repeat-y 或 no-repeat），还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

起伏羊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值