border-right模拟光标更可控因其属盒模型、精准对齐文字末尾、不干扰布局与抗锯齿；推荐用颜色切换+steps(1)实现硬切闪烁，需配合white-space、width截断及JS触发重排确保打字同步。
border-right模拟光标为什么比outline或box-shadow更可控
因为 border-right 是盒模型的一部分，能精准对齐文字末尾，且不会像 outline 那样脱离布局、影响行高，也不像 box-shadow 那样在字体抗锯齿边缘产生模糊或偏移。关键在于它能随内容宽度自然“贴边”，尤其配合 ch 单位时，1 个字符宽的光标刚好卡在最后一个字右侧。
@keyframes中光标闪烁的两种写法及区别
常见错误是只写 opacity: 0 → 1，但这会导致光标“淡入淡出”，视觉上像呼吸而非开关。真正模拟物理光标应硬切：
- 推荐写法：
from { border-right-color: transparent; }→to { border-right-color: currentColor; }，靠颜色切换实现瞬时显隐 - 慎用写法：
opacity: 0/1，在部分浏览器（如旧版 Safari）中会触发重绘延迟，光标出现拖影 - 必须加
steps(1)：动画函数设为animation-timing-function: steps(1, jump-end);，否则过渡帧会让光标半透明残留
打字效果与光标同步的关键：white-space和width控制
纯靠 @keyframes 控制 border-right 只解决闪烁，不解决“打字感”。要让光标始终停在当前已显示文字末尾，需配合：
-
white-space: nowrap;防止文字换行导致光标错位 - 用
width+overflow: hidden;截断未打出的文字，例如width: 0 → 100%;配合ch或em单位做精确进度控制 - 若用 JavaScript 动态插入文字，务必在每次插入后触发
offsetWidth读取或getBoundingClientRect()，否则 CSS 动画可能因渲染队列未更新而滞后一帧
兼容性陷阱：currentColor在伪元素中失效怎么办
当把光标放在 ::after 伪元素里并设 border-right-color: currentColor;，IE11 和部分 Android Webview 会取不到父元素颜色。稳妥方案：
立即学习“前端免费学习笔记（深入）”；
- 显式继承：
color: inherit;在伪元素上再声明一次 - 避免用
currentColor：改用具体色值或 CSS 变量，如--cursor-color: #007bff;，再border-right-color: var(--cursor-color); - 注意伪元素的
content必须非空（哪怕只是" "），否则某些浏览器下border不渲染
500ms）但文字一秒才打一个字，就会显得光标在“空等”。建议把光标周期设为文字单字延时的 1.5 倍，并用 animation-play-state: paused/resumed 配合 JS 控制启停。 
