在前端開發(fā)中， CSS 不僅可以美化網(wǎng)頁，還可以實(shí)現(xiàn)一些實(shí)用的功能，比如環(huán)形體溫。

.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 代碼實(shí)現(xiàn)了一個(gè)帶溫度數(shù)字的環(huán)形體溫，其中使用了偽元素 :before 和 :after，通過絕對(duì)定位和變換來實(shí)現(xiàn)環(huán)形和圓形部分。通過設(shè)置不同的顏色和寬度，用線性漸變來制作一個(gè)漸變的背景。

使用類名為“temperature”的元素即可使用這段 CSS 代碼，同時(shí)修改其中的數(shù)字大小和顏色也十分簡單。

這種環(huán)形體溫可以應(yīng)用在醫(yī)院、體育場(chǎng)館等場(chǎng)所，為用戶提供直觀的溫度信息。