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

最新推荐文章于 2024-08-24 00:18:19 发布

yakelande

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量1.2k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/yakelande/article/details/82687094

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圆环容器设置：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;
}

效果如下：