css实现:不固定宽高,随内容宽度自动增长的圆形

css 复制代码
<div class="circle"><span>1</span></div>


.circle {
  display: inline-block;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  padding: 5px;
  background: red;
  color: white;
  text-align: center;
  line-height: 1;
  box-sizing: content-box;
  white-space: nowrap;
}
.circle::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
  height: 0;
}
.circle span {
  display: inline-block;
  vertical-align: middle;
}
相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript