如何使用 CSS 制作价格标签和带有刻度的仪表盘效果？

制作价格标签可以使用CSS的伪元素技术，通过添加一个:before或者:after的伪元素来实现。例如：

.price-tag {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.price-tag:before {
  content: "¥";
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #f00;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
}

在HTML中使用该类名即可生成一个带有价格符号的标签：

<span class="price-tag">999</span>

制作带有刻度的仪表盘效果可以使用CSS的旋转和渐变技术。例如：

.gauge {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ddd;
  overflow: hidden;
}

.gauge__needle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 50%;
  height: 2px;
  background-color: #f00;
  transform-origin: left;
}

.gauge__ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.gauge__tick {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0) rotate(0);
  width: 2px;
  height: 10%;
  background-color: #333;
  transform-origin: bottom;
}

.gauge__tick:nth-child(2n) {
  height: 20%;
}

.gauge__tick:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0) rotate(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #333;
  transform-origin: center;
}

.gauge__tick:nth-child(2n):before {
  height: 10px;
  width: 10px;
  transform: translate(-50%, -50%) rotate(0);
}

在HTML中使用该类名即可生成一个带有刻度的仪表盘：

<div class="gauge">
  <div class="gauge__needle"></div>
  <div class="gauge__ticks">
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
    <div class="gauge__tick"></div>
  </div>
</div>

需要注意的是，这只是一个基础的模板，具体的样式和动画效果需要根据实际需求进行调整。