使用CSS创建四分之一圆环效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-24

浏览次数：次

返回列表

使用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 的值，可以使描边位于圆环内部。

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

添加文本和表单元素

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

<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 类用于旋转元素，.view 类用于定义圆环中间的文本样式。

注意事项

调整 border-width 和 outline-offset 的值可以改变圆环的粗细和描边的位置。
使用 transform: rotate() 可以旋转整个圆环。
可以使用 Unicode 字符作为图标，例如 ⛽ 和 ️。
为了更好的兼容性，请确保在不同浏览器上进行测试。

总结

通过结合 border-radius、border-color、outline、transform 和 position 等 CSS 属性，我们可以创建出各种各样的圆形和圆环效果。这种方法虽然存在局限性，例如难以实现更复杂的形状，但在不需要使用 SVG 或图片的情况下，提供了一种简单有效的解决方案。结合HTML结构，我们还可以添加文本、表单等元素，实现更复杂的功能，例如创建HUD面板。

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

# 还可以 # 九龙坡企业宣传网站优化 # 酒水线下营销推广方式 # 家居定制营销推广文案 # 宜宾营销推广专业团队 # 东莞改版网站建设有哪些 # 网站设计与建设哪里好 # 百航seo概念 # 建设网贷网站 # 安康网络推广和网络营销 # 产品如何在药店营销推广 # 但在 # 不需要 # 就能 # css # 显示效果 # 创建一个 # 单选框 # 我们可以 # 四分 # 表单 # css属性 # css样式 # 浏览器 # svg # go # html