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;
}
相关推荐
日月之行_17 小时前
codeReview不再头疼AI代码审查让你的MR质量瞬间提升
前端
鹏多多17 小时前
React使用react-fastclick解决移动端触摸延迟300ms
前端
雪山上的小灰熊17 小时前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
江城开朗的豌豆18 小时前
React Ref揭秘:直接操作DOM的"秘密通道"
前端·react.js
江城开朗的豌豆18 小时前
何时该请出Redux?前端状态管理的正确打开方式
前端·javascript·react.js
玲小珑18 小时前
LangChain.js 完全开发手册(十二)高性能 AI 应用优化技术
前端·langchain·ai编程
小岛前端18 小时前
Vue3 生态再一次加强,网站开发无敌!
前端·vue.js·前端框架
答案answer18 小时前
历时180多天,浅谈我对自由职业的初次探索
前端·程序员·three.js
江城开朗的豌豆18 小时前
Redux的双面人生:天使还是恶魔?
前端·javascript·react.js
JarvanMo18 小时前
为什么 Google 同时投资 Kotlin Multiplatform 和 Flutter
前端