如何使用CSS创造炫酷的数字样式？

巧用css实现数字样式

问题：

如何利用css巧妙地创建如图所示的数字样式？

回答：

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

方案一：

我们可以采用div标签创建背景灰色。为0-9设置对应的class，通过改变这些元素的颜色来实现。

方案二：

使用grid + nth-child + var + calc组合的方式：

/* 创建9x9的网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1em);
  grid-template-rows: repeat(9, 1em);
  width: 9em;
  height: 9em;
}

/* 设置每个网格元素的背景颜色 */
.grid > * {
  background-color: #ccc;
}

/* 使用nth-child和calc设置数字样式 */
.grid > :nth-child(2n+1) {
  background-color: var(--color);
}

.grid > :nth-child(3n+1) {
  background-color: var(--color);
}

.grid > :nth-child(4n+1) {
  background-color: var(--color);
}

.grid > :nth-child(5n+1) {
  background-color: var(--color);
}

.grid > :nth-child(6n+1) {
  background-color: var(--color);
}

.grid > :nth-child(7n+1) {
  background-color: var(--color);
}

.grid > :nth-child(8n+1) {
  background-color: var(--color);
}

.grid > :nth-child(9n+1) {
  background-color: var(--color);
}

/* 设置不同的数字样式 */
.num0 {
  --color: #000;
}

.num1 {
  --color: #f00;
}

.num2 {
  --color: #0f0;
}

.num3 {
  --color: #00f;
}

.num4 {
  --color: #f0f;
}

.num5 {
  --color: #0ff;
}

.num6 {
  --color: #f0f;
}

.num7 {
  --color: #0f0;
}

.num8 {
  --color: #000;
}

.num9 {
  --color: #f00;
}

在线演示：

https://codepen.io/mannix-zho...

以上就是如何使用CSS创造炫酷的数字样式？的详细内容，更多请关注慧达安全导航其它相关文章！