巧用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创造炫酷的数字样式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630224.html
微信扫一扫 
支付宝扫一扫 
