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

渐变 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, #fff181deg270deg, #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 18deg45deg,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, #fff181deg270deg, #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 91deg0.5turn)</code></div><div class="box2 bg-conic37"><code style="background-color: #1d45f497;">repeating-conic-gradient(#fff 0 0.25turn, #000 91deg0.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>
    

    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP 301错误:永久重定向,大勇的冒险之旅

大家好&#xff0c;我是大勇&#xff0c;一个喜欢冒险的程序员。今天&#xff0c;我要和大家分享一个我在互联网世界中的冒险故事——如何处理HTTP 301错误&#xff1a;永久重定向。 那天&#xff0c;我像往常一样&#xff0c;打开我的代码编辑器&#xff0c;准备开始一天的工…

代码随想录算法训练营第36天|● 435. 无重叠区间 ● 763.划分字母区间 ● 56. 合并区间

435. 无重叠区间 已解答 中等 相关标签 相关企业 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [start(i), end(i)] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,2],[2,3],[3,4],[1,3]]输出: 1解释: 移除…

Wireshark抓包实验

实验目的&#xff1a; 通过实验掌握下列知识&#xff1a; 掌握Wireshark抓包工具的使用。掌握建立telnet用户密码登录方式&#xff0c;并通过wireshark抓取相关信息。理解TCP的包结构&#xff0c;并掌握TCP建立连接的过程。掌握使用tftp工具&#xff0c;上传、下载文件操作及t…

Python实现多种图像去噪方法

Python实现多种图像去噪方法&#xff1a;中值滤波&#xff0c;均值滤波&#xff0c;高通滤波&#xff0c;低通滤波&#xff0c;高斯滤波&#xff0c;同态滤波 图像和视频逐渐成为人们生活中信息获取的重要来源。人们准确地获取信源发出的图像和视频信息需要保证在传输过程中的…

​ctypes --- Python 的外部函数库​

源代码: Lib/ctypes ctypes 是 Python 的外部函数库。它提供了与 C 兼容的数据类型&#xff0c;并允许调用 DLL 或共享库中的函数。可使用该模块以纯 Python 形式对这些库进行封装。 ctypes 教程 注&#xff1a;本教程中的示例代码使用 doctest 来保证它们能正确运行。 由于有…

文本每行数据乘以0.8

文本中数据计算 1.读取input.txt文本中每行数字 2.每行数字乘以0.8&#xff0c;输出到out.txt文件中 package mainimport ("bufio""fmt""log""os""strconv" )func main() {// 打开输入文件inputFile, err : os.Open(&quo…

Ganache结合内网穿透实现远程或不同局域网进行连接访问

文章目录 前言1. 安装Ganache2. 安装cpolar3. 创建公网地址4. 公网访问连接5. 固定公网地址 前言 Ganache 是DApp的测试网络&#xff0c;提供图形化界面&#xff0c;log日志等&#xff1b;智能合约部署时需要连接测试网络。 Ganache 是一个运行在本地测试的网络,通过结合cpol…

解决nuxt3报错:The requested module xxx does not provide an export named ‘PropType‘

现象如下&#xff1a; 从表象上就是typescript找不到PropType的类型声明 原因&#xff1a;这是vue3已知的type类型导入时存在的一个问题&#xff0c;而且一直没有得到解决 No matching export for import typescript interface Issue #2117 vitejs/vite GitHub 代码里面导…

解决接入mPaas一直Starting Gradle Daemon...问题

1、新版开发工具 如若使用的是新版开发工具则在settings.gradle中加入 // gradlePluginPortal() // google()maven { url https://maven.aliyun.com/repository/google }maven { url https://maven.aliyun.com/repository/gradle-plugin }maven { url https://…

Heap Sort Algorithm

A heap is a specialized tree-based data structure that satisfies the heap property. It’s commonly implemented as a binary tree, particularly an array-based representation, where the parent node’s value is either greater than or less than (depending on wh…

IncDec序列

title: IncDec序列 date: 2023-12-14 21:10:36 tags: 差分 categories: 算法进阶指南 —>传送门 题目大意 解题思路 区间操作&#xff0c;可以考虑差分。观察发现&#xff0c;最终变成相同的数&#xff0c;相当于相邻的两个数之差为 0 0 0&#xff0c;因此我们使用差分。先…

快乐数(力扣

bool isHappy(int n) {int num10,temp;while(num--){temp0;while(n){temppow(n%10,2);n/10;}ntemp;if(n1) return true;}return false; }

35、卷积算法总结

前面大概花了 10 几节的篇幅,介绍了卷积这一算法,我觉得是值得的。 因为在CNN网络中,卷积是属于绝对的核心,而且围绕着卷积可衍生出来的算法还有很多,并且卷积的算法思想在很多其他算法中都有体现,比如矩阵乘法、全连接算法。这一节来总结一下这个算法。 卷积算法的参数…

hash累计上文

import hashlib def gen_hash(text):# 创建一个SHA256哈希对象hash_object hashlib.sha256()# 更新哈希对象hash_object.update(text.encode())# 获取哈希值&#xff08;十六进制字符串&#xff09;hex_dig hash_object.hexdigest()return hex_dig# 要计算哈希值的文本 data …

【开题报告】基于SpringBoot的办公消耗品管理系统的设计与实现

1.研究背景 办公消耗品管理系统的设计与实现&#xff0c;是针对当前企业、公司等办公场所对于各种消耗品进行高效管理的需求而提出的。随着企业规模的扩大和办公自动化程度的提高&#xff0c;传统的手工管理已经无法满足日益增长的管理需求。因此&#xff0c;基于SpringBoot的…

.[henderson@cock.li].Devos、[myers@airmail.cc].Devos勒索病毒的最新威胁:如何恢复您的数据?

尊敬的读者&#xff1a; .[hendersoncock.li].Devos、[myersairmail.cc].Devos 勒索病毒的威胁无处不在。通过深入了解其特征、有效的数据恢复方法以及全面的预防措施&#xff0c;我们可以更好地保护自己、家人和企业的数字财产。在网络的战场上&#xff0c;谨慎和预防是我们最…

c语言快速排序(霍尔法、挖坑法、双指针法)图文详解

快速排序介绍&#xff1a; 快速排序是一种非常常用的排序方法&#xff0c;它在1962由C. A. R. Hoare&#xff08;霍尔&#xff09;提的一种二叉树结构的交换排序方法&#xff0c;故因此它又被称为霍尔划分&#xff0c;它基于分治的思想&#xff0c;所以整体思路是递归进行的。 …

vite 中使用插件 vite-plugin-svg-icon加载svg资源

1.安装 pnpm i vite-plugin-svg-icons -D2.配置 vite 在vite.config.ts 中配置 import { createSvgIconsPlugin } from vite-plugin-svg-icons; import path from path;function configSvgIconsPlugin(isBuild: boolean) {const svgIconsPlugin createSvgIconsPlugin({// 要…

不会设计Logo,不如来看看这9个Logo设计软件!

优秀的 Logo 是企业的形象展示。大公司将花费数万甚至数百万定制特色标志。由于预算有限&#xff0c;一些中小企业或企业家往往希望找到更具成本效益的渠道。这里有 9 个免费的 Logo 设计软件。用户可以通过输入品牌名称来生成自己的 Logo。 1、即时设计 即时设计是一个国内的…

Tomcat部署(图片和HTML等)静态资源时遇到的问题

文章目录 Tomcat部署静态资源问题图中HTML代码启动Tomcat后先确认Tomcat是否启动成功 Tomcat部署静态资源问题 今天&#xff0c;有人突然跟我提到&#xff0c;使用nginx部署静态资源&#xff0c;如图片。可以直接通过url地址访问&#xff0c;为什么他的Tomcat不能通过这样的方…