用 border-right-color 做光标会失效，因 CSS 动画不支持颜色属性的离散插值；应改用 border-right-width 或 opacity 配合 steps(1, start) 实现硬切闪烁。
为什么用 border-right-color 做光标会失效
直接对 border-right-color 应用 steps() 动画是无效的——CSS 动画不支持颜色属性的离散插值，steps(1, start) 在颜色变化上会被浏览器忽略，最终退化为平滑过渡或干脆不动。你看到光标没闪烁、一直常亮或完全没反应，大概率卡在这一步。
-
border-right-color不在 CSS 动画可逐帧控制的属性列表中（属于“非可动画颜色属性”） - 真正能被
steps()精确控制的，是border-right-width或opacity - 想保留“光标”视觉，得换思路：用宽度开关模拟显隐，而非靠颜色切换
用 border-right-width + steps(1, start) 实现硬切光标
核心是让光标在「显示（2px 实线）」和「隐藏（0px 无边框）」之间强制跳变，steps(1, start) 确保中间不补间、不模糊。动画周期必须严格匹配闪烁节奏（通常 1s 内完成一次显/隐循环）。
span.cursor {
border-right: 2px solid #000;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { border-right-width: 2px; }
50% { border-right-width: 0; }
}
- 关键点：动画里只改
border-right-width，不要碰color或style -
steps(1, start)要写在animation简写里，例如：animation: blink 1s steps(1, start) infinite - 如果光标位置偏移，检查是否父容器用了
line-height或vertical-align干扰了基线对齐
兼容性与真实打字场景的细节补丁
纯 border-right 光标在行末换行、内联元素断行时容易错位；真正在做打字效果时，得配合 contenteditable 或 JS 字符逐帧注入，否则动画只是“假光标”。
- 避免用
display: inline-block包裹光标元素，它会破坏文本流，导致光标悬空 - 移动端 Safari 对
border-right动画有渲染延迟，建议加transform: translateZ(0)强制 GPU 加速 - 若文字本身有
letter-spacing，光标宽度需同步调整，否则视觉节奏脱节 - 要支持深色模式，别写死
border-right-color: #000，改用CSS 变量如var(--cursor-color)
比 border-right 更稳的替代方案
当项目需要高一致性或支持复杂排版（比如光标要随字体大小缩放、要适配 variable font 的 weight 变化），硬控 border-right-width 就开始吃力。此时该换用 background 模拟光标：
立即学习“前端免费学习笔记（深入）”；
span.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: currentColor;
animation: blink 1s steps(1, start) infinite;
}
- 好处：尺寸完全响应
font-size和line-height，不用手动计算 - 背景色继承
currentColor，自动适配主题色，无需额外 JS 同步 - 动画触发更可靠，所有浏览器对
background-color的steps()支持都比border-color好
真正难的不是写出一个闪动的竖线，而是让它在各种字号、行高、主题、设备下都不跳、不糊、不错位——这些细节往往在交付前最后一小时才暴露。
