border-right模拟光标更可控因其属盒模型、精准对齐文字末尾、不干扰布局与抗锯齿；推荐用颜色切换+steps(1)实现硬切闪烁，需配合white-space、width截断及js触发重排确保打字同步。

border-right模拟光标为什么比outline或box-shadow更可控

因为 border-right 是盒模型的一部分，能精准对齐文字末尾，且不会像 outline 那样脱离布局、影响行高，也不像 box-shadow 那样在字体抗锯齿边缘产生模糊或偏移。关键在于它能随内容宽度自然“贴边”，尤其配合 ch 单位时，1 个字符宽的光标刚好卡在最后一个字右侧。

@keyframes中光标闪烁的两种写法及区别

常见错误是只写 opacity: 0 → 1，但这会导致光标“淡入淡出”，视觉上像呼吸而非开关。真正模拟物理光标应硬切：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐写法：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 控制启停。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！