css 刻度盘 |css设置p元素的段落间距

/* 刻度盘容器样式 */
.gauge-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
/* 刻度盘样式 */
.gauge {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
background-color: black;
box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.5);
overflow: hidden;
}
/* 刻度盘指针样式 */
.gauge .pointer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
width: 10px;
height: 70px;
background-color: white;
border-radius: 5px 5px 0 0;
transition: transform ease-in-out 0.2s;
}
/* 刻度样式 */
.gauge .gauge-tick {
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 10px;
background-color: white;
transform-origin: bottom center;
}
/* 刻度盘边框样式 */
.gauge .border {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 190px;
height: 190px;
border-radius: 50%;
border: 4px solid white;
}
/* 刻度盘数字样式 */
.gauge .value {
position: absolute;
left: 50%;
top: 70%;
transform: translateX(-50%);
font-size: 24px;
color: white;
}

以上是 CSS 刻度盘的基本样式，接下来大家需要通过 JavaScript 来控制指针的旋转，从而达到动态显示的效果。

// 获取刻度盘指针和显示数值的元素
var pointer = document.querySelector('.pointer');
var value = document.querySelector('.value');
// 设置数值范围和当前数值
var min = 0;
var max = 100;
var currentValue = 30;
// 根据当前数值计算指针旋转的角度
var angle = (currentValue - min) / (max - min) * 180;
// 将旋转的角度应用到指针样式中
pointer.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
// 更新显示数值的元素内容
value.innerHTML = currentValue;

通过上面的代码，大家就可以简单地实现一个 CSS 刻度盘了。当然，如果你想要更炫酷的效果，还可以添加动画效果、渐变色等样式。