本文将介绍如何使用纯CSS创建一个类似四分之一圆环的视觉效果，并在此基础上添加其他元素，例如文本、表单等，最终实现一个简单的HUD（Heads-Up Display）面板。我们将通过调整`border-radius`、`border-color`、`outline`和`transform`等CSS属性，配合HTML结构，来实现所需的效果。
创建基本的四分之一圆环
首先，我们需要创建一个基本的圆形，然后通过调整边框颜色来模拟四分之一圆环的效果。
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
transform: rotate(0deg); /* 初始角度设为0 */
}
.wide {
width: 200px;
height: 200px;
}上述代码中，.circle 类定义了一个圆形，border-radius: 50% 使其呈现圆形。border-width 设置边框宽度，border-color 则设置边框颜色。关键在于 border-color 的设置，#4a4a4c00 表示透明色，通过将部分边框设置为透明，我们就能得到一个四分之一圆环的效果。transform: rotate(0deg) 用于控制圆环的初始旋转角度。.wide 类用于控制圆环的大小，方便观察效果。
HTML结构如下：
立即学习“前端免费学习笔记（深入）”；
<div class="circle wide"></div>
添加描边效果
为了增强视觉效果，我们可以添加描边（outline）。
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
outline: solid 6px orange;
outline-offset: -14px;
transform: rotate(0deg);
}outline 属性用于设置描边样式，outline-offset 用于调整描边的位置。通过调整 outline-offset 的值，可以使描边位于圆环内部。
添加文本和表单元素
接下来，我们可以在圆环内部添加文本和表单元素，以实现更复杂的功能。
<div class="circle wide">
<output class='view'>85</output>
<form class='panel'>
<label><b>⛽</b><meter class='power' value="6" min="0" max="10"></meter></label><br>
<button class='btn' type='button'>?</button>
<button class='btn' type='reset'>?</button>
<button class='btn' type='submit'>?️</button>
</form>
</div>相应的CSS样式如下：
.panel {
display: inline-block;
position: absolute;
top: -8px;
right: -8px;
width: 7rem;
padding: 0 6px 6px 6px;
border-radius: 12px;
transform: rotate(90deg) translateY(-240%);
transform-origin: left center;
background: #333;
}
.panel b {
display: inline-block;
transform: rotate(-90deg);
margin-right: 8px;
}
button {
width: 30%;
padding: 0;
border: 0.5px;
border-radius: 4px;
background: rgba(51,51,51,0.3);
cursor: pointer;
}
button:hover {
background: gold;
}
.power {
width: 70%;
transform: rotate(-180deg);
}
.view {
position: absolute;
top: 6px;
left: 18px;
font-family: 'Segoe UI';
font-size: 5.5rem;
color: #aaa;
}这里使用了 position: absolute 和 transform 属性来定位和旋转表单元素。.panel 类定义了表单的样式，.panel b 用于旋转标签中的文本，button 类定义了按钮的样式，.power 类用于旋转 <meter> 元素，.view 类用于定义圆环中间的文本样式。
注意事项
- 调整 border-width 和 outline-offset 的值可以改变圆环的粗细和描边的位置。
- 使用 transform: rotate() 可以旋转整个圆环。
- 可以使用 Unicode 字符作为图标，例如 ⛽ 和 ️。
- 为了更好的兼容性，请确保在不同浏览器上进行测试。
总结
通过结合 border-radius、border-color、outline、transform 和 position 等 CSS 属性，我们可以创建出各种各样的圆形和圆环效果。 这种方法虽然存在局限性，例如难以实现更复杂的形状，但在不需要使用 SVG 或图片的情况下，提供了一种简单有效的解决方案。 结合HTML结构，我们还可以添加文本、表单等元素，实现更复杂的功能，例如创建HUD面板。
