数字样式编写：用 css 创建数字

在网页设计中，数字的呈现方式对于用户体验至关重要。为了美化数字的外观，可以使用 css 样式来实现。

问题：用 css 编写数字

如题所示，如何使用 css 编写如图所示的数字？

立即学习“前端免费学习笔记（深入）”；

回答：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

方案 1：使用多个 div 和预设 class

提出者建议使用多个 div 标签来表示数字背景，并通过预设 9 个 class 来表示 0-9 的数字，并改变其颜色以呈现数字。

方案 2：使用网格布局、nth-child、var 和 calc

以下提供了一种使用网格布局、nth-child、var 和 calc 实现数字样式的代码示例：

/* 网格布局 */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

/* 单个数字 */
.number {
  width: 100px;
  height: 100px;
  background: #ccc;
  color: white;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  border: 1px solid black;
}

/* nth-child 选择器 */
.number:nth-child(1) {
  --num: 0;
}
.number:nth-child(2) {
  --num: 1;
}
.number:nth-child(3) {
  --num: 2;
}
.number:nth-child(4) {
  --num: 3;
}
.number:nth-child(5) {
  --num: 4;
}
.number:nth-child(6) {
  --num: 5;
}
.number:nth-child(7) {
  --num: 6;
}
.number:nth-child(8) {
  --num: 7;
}
.number:nth-child(9) {
  --num: 8;
}

/* calc 函数 */
.number::before {
  content: calc(10 * var(--num) + 1);
}

在线演示：

查看此方案对应的在线演示：https://codepen.io/mannix-zho...