2022-02-21 -webkit-mask conic-gradient 结合使用制作圆环

conic-gradient
圆锥渐变
linear-gradient : 线性渐变

radial-gradient : 径向渐变

linear-gradient 线性渐变的方向是一条直线，可以是任何角度
radial-gradient 径向渐变是从圆心点以椭圆形状向外扩散
而从方向上来说，圆锥渐变的方向是这样的：

起始点是图形中心，然后以顺时针方向绕中心实现渐变效果
试验一下：

  .ring {
        width: 70 * $remh;
        height: 70 * $remh;
        border-radius: 50%;
        background: conic-gradient(red, yellow, green);
    }

实现一个红黄蓝得锥形渐变，效果如下：

以上圆锥渐变是通过red渐变到yellow，然后渐变到green，也可以定义百分比来控制每个颜色渐变得占比：

background: conic-gradient(red 30%, yellow 70%, green 100%);

还可以设定区域颜色值，这样就是饼图：

background: conic-gradient(red 0%, red 30%, yellow 30%, yellow 70%, green 70%, green 100%);

还可以用如下写法，效果与上图一样：

background: conic-gradient(red 0% 30%, yellow 30% 70%, green 70% 100%);

因为先定义的颜色的层叠在后定义的颜色之上，还可以写成如下形式，结果也一样：

background: conic-gradient(red 0% 30%, yellow 0 70%, green 0 100%);

还可以写出三角形：

background: conic-gradient(red 12.5%, green 0 37.5%, red 0 62.5%, green 0 87.5%, red 0);

或者

background: conic-gradient(red  0 12.5%, green  12.5% 37.5%, red  37.5% 62.5%, green  62.5% 87.5%, red   87.5% 100%);

效果如下：

再结合background-size

background-size: 35 * $remh 35 * $remh;

重复圆锥渐变 repaet-conic-gradient
我们假设希望不断重复的片段是 0~30° 的一个片段

background: repeating-conic-gradient(red 0 15deg, green 0 30deg);

效果如下：

制作圆环：
制作圆环就要结合-webkit-mask属性了

  <div
   class="ring"
   :style="{
      backgroundImage: `conic-gradient(rgba(255, 255, 255, 0.15), rgba(68, 215, 182, 1) 30%, rgba(255, 255, 255, 0.15) 30% 100%)`
            }"
        ></div>

结果如下：

若百分比不是固定的，也可以将百分比设置成动态：

 <div
   class="ring"
   :style="{
      backgroundImage: `conic-gradient(rgba(255, 255, 255, 0.15), rgba(68, 215, 182, 1) ${score.rate}%, rgba(255, 255, 255, 0.15) ${score.rate}% 100%)`
            }"
        ></div>

若想形成圆环，需要-webkit-mask属性：
-webkit-mask属性
渐变遮罩
可以结合线性渐变，径向渐变等
线性渐变：

-webkit-mask: linear-gradient(#000, transparent);

径向渐变：
为了创建径向渐变必须设置两个终止色

-webkit-mask: radial-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 60%);