border-right 模拟光标不跟文字颜色同步，因它不继承 color 或 currentcolor 的动态变化，需用 border-right:2px solid currentcolor 并确保父元素有明确 color 声明。
border-right 模拟光标为什么总不跟文字颜色同步
因为 border-right 是独立于文本渲染的边框，它不会自动继承 color 或 currentcolor 的动态变化（比如父元素 color 改变、伪类切换），更不会响应 CSS 变量实时更新。你设成 red，它就永远是 red；设成 var(--text-color)，但没在 :root 或作用域里定义这个变量，它就退化为 transparent 或默认色。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 直接用
border-right: 2px solid currentcolor——currentcolor会跟随最近声明的color值，比写死颜色或变量更稳妥 - 确保文字容器本身有明确
color声明（哪怕只是color: inherit），否则currentcolor会回退到初始值（通常是 black） - 避免在动画关键帧里反复改
border-right-color：浏览器对 border 颜色的重绘开销略高，且容易因层叠顺序导致闪烁不一致
@keyframes 里控制光标闪烁必须用 opacity 吗
不是必须，但用 opacity 是最可靠的选择。用 border-right-width（0 → 2px）或 visibility 都会触发 layout，造成文字轻微晃动；而 opacity: 0/1 只走合成层，性能好、无位移、兼容性稳（IE10+ 支持）。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 关键帧写成
@keyframes blink {0%, 100% { opacity: 1;} 50% {opacity: 0;} }，别用 0%→50%→100% 这种三段式，容易因时间精度出现“卡亮” - 动画时长建议设为
animation-duration: 1.2s左右，太快（2s）像卡顿 - 加
animation-timing-function: steps(1, end)能让闪烁更硬朗——避免缓动导致半透明过渡
打字机效果下光标怎么始终对齐最后一字右侧
光标位置出错，90% 是因为用了 display: inline-block 或 position: absolute 把光标元素从文本流里拎出来了。一旦文字换行、font-size 变化、或用了 letter-spacing，光标就会漂移。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 把光标做成文字末尾的伪元素：
::after，并设content: ""+display: inline-block+vertical-align: baseline - 关键样式组合：
border-right: 2px solid currentcolor; height: 1em; margin-left: -2px;——margin-left: -2px抵消 border 自身宽度，让它真正“贴”在字右边 - 如果用了
font-feature-settings或连字（ligature），测试时务必在真实字体下验证，某些字体的字距微调会让em高度和视觉基线轻微偏移
彩色文字 + 彩色光标在深色模式下失效怎么办
深色模式下，很多站点靠 @media (prefers-color-scheme: dark) 切换 color，但如果你的光标只依赖初始 color，而没监听系统变化，它就会卡在亮色模式的颜色上。
实操建议：
立即学习 “ 前端免费学习笔记（深入）”；
- 在暗色模式媒体查询里，显式重置光标颜色：
@media (prefers-color-scheme: dark) {.typewriter::after { border-right-color: currentcolor;} } - 别用
!important强制覆盖，优先靠选择器权重和声明顺序控制；否则后续想用 JS 动态换主题时很难解耦 - 测试时打开系统深色模式（不只是浏览器模拟），有些 OS 的 color-scheme 切换有延迟，CSS 变量可能没及时刷新
最麻烦的其实是字体加载完成前的那几百毫秒：web font 还没就绪时，浏览器用 fallback 字体渲染，1em 高度和基线都不同，光标会突然跳一下。解决它得配合 @font-face 的 font-display: optional 或监听 document.fonts.load，但这已经超出纯 CSS 范畴了。
