要在css中指定线性渐变以创建旋转器

Question

我想制作一个如图中的微调框

这是我的代码：html：

<div class="wrapper">
  <div class="pie ten"></div>
 <div>

css：

:root {
  --pie-width : 100px;
  --pie-height : 100px;
}

.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.pie::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  transform: scale(0.8);
  width: 100px;
  height: 100px;
  background-color: white;
  color: red;
  font-weight: bold;
}

.pie {
  width: var(--pie-width);
  height: var(--pie-height);
  background: grey;
  border-radius: 50%;
}

.ten {
  background-image: linear-gradient(0deg, green 50%, blue 50%), linear-gradient(-100deg, red 50%, transparent 50%) ;
}

我想知道每个线性梯度的函数是什么，例如0deg在做什么，twotwo 50％在做什么基本上我想创建一个组件，如果我给出10，则进度条应该像10％pi图表，我会找出来的，但是我想知道我在整个互联网上看过的线性梯度的解释，我不了解线性梯度在这里如何像径向梯度那样起作用。请解释。这是我的笔：https://codepen.io/sriramhegdeofficial/pen/MWYJpjQ

Answer 1

线性梯度（0度，绿色50％，蓝色50％）

0deg：这表示渐变是向上和向下的直线，如果将其设置为90deg，则表示渐变将是从左到右。这是一个可与您一起玩的Codepen：Link to Codepen

green50：渐变中绿色的50％blue50：渐变中蓝色的50％

希望这会有所帮助！

   #color-block {
  height: 300px;
  width: 300px;
  background: linear-gradient(0deg, turquoise, tomato);
}