如何使用CSS实现圆形包裹的数字1的展示效果

你可以通过固定宽高+圆角+flex居中的方式快速实现，代码如下：

代码示例 #

HTML部分 #

<span class="round-num">1</span>

CSS部分 #

.round-num {
  /* 宽高保持一致，数值可按需调整 */
  width: 22px;
  height: 22px;
  /* 背景色可以替换成你需要的配色，示例为常见的红色气泡色 */
  background: #ff3b30;
  /* 圆角设为50%即可生成正圆 */
  border-radius: 50%;
  /* 文字样式按需调整 */
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  /* 行内flex实现文字垂直水平居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

可选优化点 #

• 如果需要适配多位数字，可将固定宽高替换为最小宽高+内边距：把width和height改成min-width: 22px，再加padding: 0 3px，这样数字超过1位时元素会自动变成圆角矩形，1位时保持正圆。
• 不需要额外嵌套标签，单个元素即可实现，兼容所有主流现代浏览器。

内容的提问来源于stack exchange，提问作者Camelia Soliman