border-right模拟光标可行但需用color硬切而非opacity，因opacity会导致拖影、错位及不同步；正确做法是from/to切换border-right-color并配合steps(1,jump-end)实现瞬时显隐。
border-right 模拟光标闪烁可行，但必须用 border-right-color: transparent 切换，不能只动 opacity；否则在 Safari 或缩放场景下会拖影、错位、不同步。
为什么 border-right 光标容易出问题
很多人直接给文字加 border-right: 2px solid #000 再动画 opacity，这其实是在动整个边框的透明度——结果是光标“呼吸”而不是“开关”，且边框粗细、颜色、基线都和字体不联动。更糟的是：opacity 动画会触发重绘，在旧版 Safari 或高 DPR 屏幕上常出现半透明残留帧。
真正可控的方式是只切换颜色，让浏览器在 transparent 和 currentColor（或具体色值）之间硬切：
-
border-right-color变化不触发布局重排，只走合成层，性能更稳 - 颜色切换是瞬时的，配合
steps(1)能做到真正的“开/关”感 - 只要父元素设置了
font-family和line-height，border-right的高度和对齐就基本可靠（前提是用等宽字体）
@keyframes 必须写成 from→to 硬切，别用 0%→50%→100%
错误写法：@keyframes blink { 0% { border-right-color: #000; } 50% { border-right-color: transparent; } 100% { border-right-color: #000; } } —— 这会让动画引擎插值中间帧，导致短暂出现半透明灰边。
正确写法只定义两个状态，靠 steps(1, jump-end) 强制跳变：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@keyframes blink {
from { border-right-color: currentColor; }
to { border-right-color: transparent; }
}
然后在元素上应用：animation: blink 0.8s steps(1, jump-end) infinite;
-
steps(1, jump-end)比step-end更明确，兼容性更好（IE10+、Safari 6.1+ 都认） - 动画时长建议 0.7–1s：短于 0.6s 容易看不清，长于 1.2s 显得迟滞，尤其在移动端
- 别用
animation-delay启动光标，它会导致首次闪烁延迟，破坏“正在输入”的即时感
必须搭配 white-space: nowrap 和 overflow: hidden
光标位置依赖文本容器的宽度变化。如果文字换行或空格被压缩，border-right 会卡在第一行末尾，而不是当前“打字点”。
-
white-space: nowrap防止意外折行，确保光标始终贴着末尾字符右侧 -
overflow: hidden配合width动画做打字截断（例如width: 0 → 100%），否则光标会一直显示在完整文本末尾 - 若文本含中文、Emoji 或可变宽度符号，务必用
font-family: monospace或至少font-variant-east-asian: tabular-nums控制等宽表现 - 别依赖
ch单位算宽度：不同字体下1ch实际像素差异大，用em或固定像素更可控
多行文本或动态内容时，border-right 方案会失效
一旦容器允许换行（white-space: normal）、或文本通过 JS 动态插入（比如逐字 textContent += char），border-right 就无法自动锚定到“最后一行末尾”。这时伪元素方案（::after）才是唯一靠谱选择。
如果你已用 JS 控制打字节奏，又想保留 border-right 光标：
- 每次插入新字符后，必须强制触发一次 layout：读取
element.offsetWidth或element.getBoundingClientRect() - 否则 CSS 动画可能卡在上一帧，光标滞后一个字符
- 移动端 WebKit（如 iOS Safari）对此尤其敏感，不读取就大概率不同步
真正难处理的不是怎么让光标闪，而是让它始终停在“此刻该停的位置”——这个位置由文本流、字体加载、缩放比例、甚至系统字体替换共同决定。border-right 是最轻量的起点，但也是最容易在细节上翻车的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
