使用CSS创建四分之一圆环效果-html教程-PHP中文网

使用CSS创建四分之一圆环效果

DDD

发布： 2025-10-24 12:36:26

原创

1038人浏览过

使用css创建四分之一圆环效果

本文将介绍如何使用纯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 的值，可以使描边位于圆环内部。

四维时代AI开放平台

查看详情

添加文本和表单元素

接下来，我们可以在圆环内部添加文本和表单元素，以实现更复杂的功能。

<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面板。

以上就是使用CSS创建四分之一圆环效果的详细内容，更多请关注php中文网其它相关文章！