在前端开发中， CSS 不仅可以美化网页，还可以实现一些实用的功能，比如环形体温。

.temperature {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
background: linear-gradient(to top, #ff6b6b 50%, #f5f5f5 0);
}
.temperature:before {
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 80px;
height: 80px;
border-radius: 50%;
border: 10px solid #fff;
}
.temperature:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
}
.temperature span {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
font-size: 18px;
text-align: center;
color: #ff6b6b;
}

上面的 CSS 代码实现了一个带温度数字的环形体温，其中使用了伪元素 :before 和 :after，通过绝对定位和变换来实现环形和圆形部分。通过设置不同的颜色和宽度，用线性渐变来制作一个渐变的背景。

使用类名为“temperature”的元素即可使用这段 CSS 代码，同时修改其中的数字大小和颜色也十分简单。

这种环形体温可以应用在医院、体育场馆等场所，为用户提供直观的温度信息。