数字在页面里的出镜率其实非常高：价格、销量倒计时、数据大屏的统计指标、排行榜的排名序号，到处都是数字。但大多数页面对数字的处理就是换个字体、加个加粗，完全没有发挥CSS的能力。实际上，只用CSS不借助任何图片和JavaScript图形库，就能做出渐变填充、空心描边、翻牌切换、滚动计数这些非常抓眼球的效果。本文会从基础的文字裁剪讲起，一步步把几种常见数字样式的原理和实现讲透，每种效果都给出完整可运行的代码。
用background-clip做出渐变填充和描边数字
渐变数字是数据大屏里最常见的需求，核心是background-clip: text这个属性。它的作用是让背景只在文字的形状范围内显示，再配合-webkit-text-fill-color: transparent把文字本身的填充色去掉，文字就变成了背景渐变的“镂空窗口”。
很多人第一次写这个效果不生效，几乎都是漏掉了-webkit-text-fill-color这一步。只写background-clip: text而文字仍然有颜色时，文字颜色会盖在背景上面，渐变就看不见了。这个属性虽然带着-webkit前缀，但Firefox也早已支持，实际项目中可以放心用。下面是完整的渐变数字代码：
.gradient-number {
font-size: 120px;
font-weight: 900;
font-family: "Arial Black", sans-serif;
/* 定义一个斜向渐变作为背景 */
background-image: linear-gradient(135deg, #00d4ff 0%, #7a5cff 50%, #ff4d9d 100%);
/* 让背景只出现在文字形状内 */
-webkit-background-clip: text;
background-clip: text;
/* 把文字本身的填充色变成透明，露出背景渐变 */
-webkit-text-fill-color: transparent;
}描边空心数字则是另一个思路，用的是-webkit-text-stroke。它接收两个参数，第一个是描边宽度，第二个是颜色。把它和渐变裁剪组合起来，还能做出渐变描边加浅色填充的层次效果：
.stroke-number {
font-size: 120px;
font-weight: 900;
color: rgba(255, 255, 255, 0.08);
/* 1.5像素的描边，颜色用亮色 */
-webkit-text-stroke: 1.5px #00d4ff;
}
/* 进阶版：渐变描边 + 半透明填充 */
.fancy-number {
font-size: 120px;
font-weight: 900;
/* 先画两层背景：一层白色模拟文字填充，一层渐变 */
background: linear-gradient(#0b1026, #0b1026) padding-box,
linear-gradient(135deg, #00d4ff, #ff4d9d) border-box;
-webkit-background-clip: text, border-box;
-webkit-text-fill-color: transparent;
}需要注意的是，text-stroke是从文字边缘向内外两侧同时描边的，如果宽度设得太大，笔画会被描边吃掉，细字体的文字尤其明显。所以使用描边时建议搭配较粗的字重，比如900或者直接选黑体类字体。
翻牌数字：模拟机场翻页牌的立体效果
翻牌效果指的是数字像老式机场航班牌那样，上半片和下半片分别绕水平轴翻转切换。这个效果拆开看其实由两部分组成：静态的立体结构和切换时的动画序列。
结构上，每个数字位被拆成上下两半，用overflow: hidden把一个完整数字裁成两片。父容器设置perspective产生透视，翻转的那半张卡片用transform: rotateX绕X轴转动。perspective的值越小透视越强，翻转时卡片会有明显的近大远小，一般设置在400到800像素之间比较自然。
完整的HTML结构如下：
<div class="flip-card"> <div class="half top"><span>3</span></div> <div class="half bottom"><span>4</span></div> <div class="half top flip"><span>3</span></div> <div class="half bottom flip"><span>4</span></div> </div>
对应的CSS里，关键是各个半片卡片的定位和翻转动画的编排。top半片从0度翻到-90度时，bottom半片再从90度翻回0度，两段动画首尾相接就形成了完整的翻转。中间那条分割线用伪元素画一条细线模拟翻页牌的物理接缝：
.flip-card {
position: relative;
width: 80px;
height: 120px;
font-size: 90px;
font-weight: bold;
perspective: 600px;
background: #1a1a2e;
border-radius: 8px;
}
.half {
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
background: #222244;
color: #fff;
line-height: 120px;
text-align: center;
}
.half.top { top: 0; border-radius: 8px 8px 0 0; }
.half.bottom { top: 50%; border-radius: 0 0 8px 8px; }
/* bottom半片里的数字要往上顶半个身位 */
.half.bottom span { position: absolute; top: -60px; left: 0; width: 100%; }
/* 接缝线 */
.flip-card::after {
content: "";
position: absolute;
top: 50%; left: 0;
width: 100%; height: 2px;
background: rgba(0,0,0,0.6);
z-index: 5;
}
/* 上半片向下翻转 */
.half.flip.top {
transform-origin: bottom;
animation: flipDown 0.3s ease-in;
z-index: 3;
}
/* 下半片从上方翻下来 */
.half.flip.bottom {
transform-origin: top;
transform: rotateX(90deg);
animation: flipUp 0.3s 0.3s ease-out forwards;
z-index: 3;
}
@keyframes flipDown {
from { transform: rotateX(0deg); }
to { transform: rotateX(-90deg); }
}
@keyframes flipUp {
from { transform: rotateX(90deg); }
to { transform: rotateX(0deg); }
}实际使用时，切换数字需要JavaScript配合：先把新的数字填进隐藏的那组半片里，翻转动画结束后，把静态的上下两片更新为新数字，再移除flip类。这个流程如果用纯CSS的animation-fill-mode处理好，视觉上就是无缝的一次翻转。
滚动计数与自动编号：让数字自己动起来
数字从0滚动增长到目标值是营销页和数据展示里非常经典的效果。纯CSS实现要靠CSS自定义属性配合@property注册，注册后的变量才能被当作数值参与transition或animation的插值计算。这一点是整个效果的核心，没有注册的变量在动画中只会做离散跳变，不会平滑过渡。
/* 注册一个数字类型的自定义属性 */
@property --num {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.counter {
font-size: 100px;
font-weight: 900;
color: #00d4ff;
/* 动画驱动变量从0变到86400 */
animation: countUp 3s ease-out forwards;
counter-reset: num var(--num);
/* 用counter把变量值渲染成文字 */
}
.counter::after {
content: counter(num);
}
@keyframes countUp {
from { --num: 0; }
to { --num: 86400; }
}原理上分三步：先用@property告诉浏览器--num是个整数；再用@keyframes让这个变量随时间变化；最后用counter-reset把变量值喂给计数器，通过::after的content: counter(num)渲染出来。目前主流浏览器都已经支持@property，如果不考虑旧浏览器，这种方案完全不需要一行JavaScript。
除了计数动画，CSS的counter还能用来做自动编号的序号列表，比如排行榜里前三名自动标上1、2、3。做法是给每个列表项设置counter-increment，再用伪元素输出：
.rank-list li {
counter-increment: rank;
list-style: none;
padding-left: 50px;
position: relative;
margin-bottom: 12px;
}
.rank-list li::before {
content: counter(rank);
position: absolute;
left: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #ffb347, #ff4d9d);
color: #fff;
font-weight: bold;
text-align: center;
line-height: 36px;
}
/* 前三名给不同颜色 */
.rank-list li:nth-child(1)::before { background: linear-gradient(135deg, #ffd700, #ff9500); }
.rank-list li:nth-child(2)::before { background: linear-gradient(135deg, #c0c0c0, #8a8a8a); }
.rank-list li:nth-child(3)::before { background: linear-gradient(135deg, #cd7f32, #a05a2c); }这种写法的好处是序号完全由文档结构决定，增删条目时序号自动更新，不用手动维护。而且伪元素上的序号可以随意套用前面讲的渐变、描边等文字效果，组合空间非常大。
几个实战层面的细节建议
第一，数字类效果强烈建议使用等宽数字字体特性。font-variant-numeric: tabular-nums能让每个数字占据相同宽度，倒计时或计数动画时数字不会左右抖动，这个细节对观感影响很大。
第二，翻牌和滚动这类循环动画要注意性能。翻转尽量只触发transform动画，避免在keyframes里改width、top这类会引发重排的属性。渐变背景的数字如果数量很多，可以考虑把渐变定义复用同一个class，减少浏览器重复解析。
第三，注意降级。@property和background-clip: text在老旧浏览器上可能失效，建议给数字设置一个兜底的实色color，这样即使裁剪失效，文字依然可读，不会变成透明看不见。用@supports做特性检测是更稳妥的做法：
.number {
color: #00d4ff; /* 兜底颜色 */
}
@supports (-webkit-background-clip: text) {
.number {
background-image: linear-gradient(135deg, #00d4ff, #ff4d9d);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}把这几种技术组合起来，比如翻牌加渐变填充、计数动画加描边，就能搭出风格统一又层次丰富的数字展示模块。先从单个效果跑通，再做组合，出问题时也容易定位是哪一层的问题。