溫度計是一種用來測量溫度的工具，它通常是一個帶有刻度的長方形玻璃管，里面充滿了一定量的水銀或酒精，并與溫度變化相關。現在我們可以通過CSS樣式來模擬一個溫度計。
.thermometer {
width: 20px;
height: 150px;
display: inline-block;
position: relative;
border: 1px solid #ccc;
background: #fff;
}
.thermometer:before {
content: '';
display: block;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #f00 0%, #ff0 50%, #0f0 100%);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.thermometer:after {
content: '';
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ccc;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}上面是實現溫度計效果所需要的CSS樣式代碼。首先，我們創建一個容器
來包含整個溫度計。容器的寬度和高度可以自行調整以適應實際使用場景。
然后，我們使用:before偽元素來創建溫度計的刻度線條，這里使用了CSS漸變來實現顏色的漸變效果。同時，我們設置偽元素的position為absolute，使其與容器底部對齊，并且使用left和transform屬性使其水平居中。
最后，我們使用:after偽元素來創建溫度計的頂部蓋子，同樣設置position為absolute使其相對于容器底部50%的位置，并且使用border-radius屬性將其設置為圓形。蓋子與刻度線之間的距離可以根據需要進行調整。
通過這樣的CSS樣式，我們可以方便地在網頁上創建出一個簡單的溫度計效果，可以用于展示溫度的變化，或者作為一種可交互的測溫工具。