css实现高度等于宽度百分比的圆环

最新推荐文章于 2025-06-04 13:51:21 发布

原创最新推荐文章于 2025-06-04 13:51:21 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现圆环布局的方法，并展示了如何在圆环内部居中文本。通过特定的padding和border-radius属性设置，可以轻松创建圆形或圆环形状，并利用绝对定位将文本置于圆环正中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圆环容器设置：width:0,height:0,padding-bottom: "80%",padding-left:"80%",border:"3px solid red",borderRadius:"80%"

效果如下：

在圆环内显示文字：

.ring {
  width: 0;
  height: 0;
  padding-bottom: 80%;
  padding-left: 80%;
  border: 3px solid red;
  border-radius: 80%;
  position: relative
}
.ring span {
  color: red;
  font-size: 14px;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 0;
  position: absolute;
  height: 30px;
  line-height: 30px;
  margin-top: -15px;
}

效果如下：