【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;准备开始一天的工…

Python实现多种图像去噪方法

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

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 代码里面导…

IncDec序列

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

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

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

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

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

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

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

leetcode 904. 水果成篮(优质解法)

代码&#xff1a; class Solution {public int totalFruit(int[] fruits) {int lengthfruits.length;int []fruitNumsnew int[length1]; //用于记录各个种类摘了多少个水果int count0; //用于记录当前采摘了几种水果int sum0; //用于记录当前共摘了多少水果for(int left0…

Peter算法小课堂—简单建模(2)

太戈编程736题 题目描述&#xff1a; 你是一只汪星人&#xff0c;地球毁灭后你回到了汪星&#xff0c;这里每天有n个小时&#xff0c;你需要为自己选择正好连续的m小时作为每天睡眠的时间。从凌晨开始&#xff0c;第i小时内的睡眠质量为xi&#xff0c;请问经过选择后&#xf…

详解—C++右值引用

目录 一、右值引用概念 二、 左值与右值 三、引用与右值引用比较 四、值的形式返回对象的缺陷 五、移动语义 六、右值引用引用左值 七、完美转发 八、右值引用作用 一、右值引用概念 C98中提出了引用的概念&#xff0c;引用即别名&#xff0c;引用变量与其引用实体公共…

Android P 9.0 增加以太网静态IP功能

效果图 一、Settings添加以太网的配置&#xff1a; 1、vendor\mediatek\proprietary\packages\apps\MtkSettings\res\xml\network_and_internet.xml <com.android.settingslib.RestrictedPreferenceandroid:key"ethernet_settings"android:title"string/et…

集合04 Collection (Set) - Java

Set Set 基本介绍Set 常用方法Set 遍历方式 HashSet 的全面说明练习 HashSet 的底层机制说明HashSet 的扩容机制&转成红黑树机制练习1练习2 LinkedHashSetLinkedHashSet底层源码练习 Set 基本介绍 无序&#xff08;添加和取出的顺序不一致)&#xff0c;没有索引 [后面演示…

【Java系列】详解多线程(二)——Thread类及常见方法(下篇)

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Java系列专栏】【JaveEE学习专栏】 本专栏旨在分享学习Java的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一…

大模型微调的“温度”参数,原来影响的是 softmax

大家好啊&#xff0c;我是董董灿。 在对大模型进行微调训练时&#xff0c;经常会看到几个重要的超参数&#xff0c;用来控制大模型生成文本的效果。 其中一个超参数叫做 Temperature&#xff0c;中文名字叫温度&#xff0c;初见时很是不解&#xff0c;为啥一个模型还有温度这个…

将创建表字段语句快速转换成golang struct字段

用网页jquery快速生成 本地建立 struct.html <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>leo-转换</title> <script src"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></s…

深入学习《大学计算机》系列之第1章 1.2节——问题描述与抽象

一.欢迎来到我的酒馆 第1章 1.2节&#xff0c;问题描述与抽象。 目录 一.欢迎来到我的酒馆二.问题描述、抽象与建模1.什么是抽象2.为什么要抽象3.什么是建模 二.问题描述、抽象与建模 什么是抽象&#xff1f;为什么要抽象&#xff1f;什么是建模&#xff1f;建什么模&#xff1…

Windows安装Elasticsearch并结合内网穿透实现公网远程访问

Windows安装Elasticsearch并结合内网穿透实现公网远程访问 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜…

[Longformer]论文实现:Longformer: The Long-Document Transformer

文章目录 一、完整代码二、论文解读2.1 介绍2.2 Longformer注意力模式注意力计算 2.3 自回归语言模型注意力模式训练结果 2.4 预训练和微调注意力模式位置编码预训练结果 2.5 Longformer-Encoder-Decoder (LED) 三、整体总结 论文&#xff1a;Longformer: The Long-Document Tr…

wordpress:6.3的docker部署和k8s部署方式

wordpress:6.3的docker部署 一.docker部署mysql5.7数据库 docker pull mysql:5.7 mkdir -p /data/mysql/data /data/mysql/logs /data/mysql/conf touch /data/mysql/conf/my.cnf docker run --restartalways -p 13306:3306 --name mysql -v /data/mysql/conf:/etc/mysql/con…