CSS 油表是一種很有趣的設計技巧，可以讓我們創建出像汽車里面的油表一樣的效果。

/* 創建一個圓形的div作為油表外框 */
.oil-container {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #ddd;
position: relative;
overflow: hidden;
}
/* 創建油量進度條的div，并且設置其背景漸變 */
.oil-level {
width: 100%;
height: 0%;
background-image: linear-gradient(to bottom, #fece44, #ff7700);
position: absolute;
bottom: 0;
transition: height 0.5s ease-in-out;
}
/* 給油量進度條添加樣式，使得進度條的高度隨著油量變化 */
.oil-container[data-percent="0"] .oil-level {
height: 0%;
}
.oil-container[data-percent="25"] .oil-level {
height: 25%;
}
.oil-container[data-percent="50"] .oil-level {
height: 50%;
}
.oil-container[data-percent="75"] .oil-level {
height: 75%;
}
.oil-container[data-percent="100"] .oil-level {
height: 100%;
}
/* 創建表盤指針 */
.oil-needle {
width: 5px;
height: 70px;
background-color: #505050;
position: absolute;
left: calc(50% - 2.5px);
bottom: calc(50% - 35px);
transform-origin: bottom center;
transform: rotate(-42deg);
transition: transform 0.5s ease-in-out;
}
/* 根據油量變換指針的角度 */
.oil-container[data-percent="0"] .oil-needle {
transform: rotate(-42deg);
}
.oil-container[data-percent="25"] .oil-needle {
transform: rotate(-25deg);
}
.oil-container[data-percent="50"] .oil-needle {
transform: rotate(-8deg);
}
.oil-container[data-percent="75"] .oil-needle {
transform: rotate(9deg);
}
.oil-container[data-percent="100"] .oil-needle {
transform: rotate(26deg);
}

以上是一個基本的 CSS 油表的代碼示例。我們可以通過給容器元素添加data-percent屬性，來控制油表的油量顯示。同時，我們還可以通過 CSS 動畫，讓指針動態地指向相應的位置。