时间线圆点对齐的艺术：html-resume伪元素实现白边圆圈与Firefox渲染bug规避方案详解
时间线圆点对齐的艺术html-resume伪元素实现白边圆圈与Firefox渲染bug规避方案详解【免费下载链接】html-resumeA single-page resume template completely typeset with HTML CSS.项目地址: https://gitcode.com/gh_mirrors/ht/html-resumehtml-resume 是一个完全用 HTML 与 CSS 排版的单页简历模板通过浏览器“打印为 PDF”即可导出专业简历。它最吸睛的视觉细节就是左侧时间线上的那一排圆点——如何用一个白边圆圈稳稳挂在竖直时间线上又如何在 Firefox 下规避渲染 bug正是本文要讲透的核心技巧。 项目仅依赖两个子模块dep/normalize.css/ 负责样式归一化dep/Font-Awesome/ 提供小图标渲染成品可参考 firefox_result.pdf。时间线圆点的三层结构date、decorator、details在 resume.html 中每一段经历都是一个classblocks的横向容器内部并排三列列类名作用左.date右对齐的年份区间如 2015 / present中.decorator仅 2pt 宽的竖线 圆点列右.details职位、公司与描述正文display: flex把三列钉在同一行里竖线由.decorator的border-left画出圆点则完全靠伪元素叠加在竖线上。也就是说——圆点的位置 竖线位置 两个偏移量这是整个对齐问题的数学基础。为什么单个伪元素画不出白边圆圈按常规思路一个::before伪元素 border: 1px solid white就能得到外圈白、内圈灰的效果。但 style.css 中的注释第 193–200 行附近记录了作者在 Firefox 上遇到的两个真实 bug白边溢出背景若未设置background-clip白色边框会溢出灰色底色的渲染区域打印后出现脏边竖线穿透白边本应被白色边框遮住的灰色竖线在 Firefox 打印时从圆点中间透出来圆点变成被划了一刀的甜甜圈。结论是白边圆圈不能用描边实现必须拆成两个实心圆。双圆伪元素方案::before 与 ::after 的分工规避 bug 的完整方案就是两层叠圆::before 白色外圆尺寸--decorator-outer-dim9px纯白背景border-radius取直径一半形成实心白圆::after 灰色内圆尺寸比外圆少2 × --decorator-border-width即 9px − 2px 7px颜色#555叠在白圆正中视觉上就是白边圆圈。两个伪元素的top/left分别等于外圆偏移量加、减 1px 边框宽度用calc()精确保证同心。这样白圆是背景填充而非描边Firefox 的两个渲染 bug 就都失去了发作条件。圆点精确对齐6 个关键 CSS 变量圆点挂在竖线上的水平对齐取决于竖线的 1px 边框与 9px 圆点之间的几何关系。style.css 把这些魔法数字全部收进:root变量第 20–24 行附近--decorator-outer-dim: 9px—— 外圆直径--decorator-border-width: 1px—— 白边宽度--decorator-outer-offset-left: -5.5px—— 水平偏移让圆心落在竖线中轴上负值意味着向左越过竖线一半--decorator-outer-offset-top: 10px—— 垂直位置圆点距行顶的固定距离⚠️ 注释里有一句值得新手品味using px for very good precision control用 px 是为了获得很高的精度控制。因为pt与in在小尺寸下会引入亚像素取整误差9px 这种小目标必须用 px这是跨浏览器一致对齐的关键决策。同类的小修正还有#main h2与#main h2::after衔接区块标题上方的一小段竖线中刻意加入的0.5px偏移注释写明是for aligning fx printing——专治 Firefox 打印时的半像素错位。如何修改圆点颜色、大小与位置想把自己的简历时间线改成别的风格只需改动少数几个变量与规则换内圆颜色修改.decorator::after的background-color原值#555换白边宽度调整--decorator-border-width内外圆尺寸会通过calc()自动联动圆点离标题更近减小--decorator-outer-offset-top想让圆点整体换色比如品牌色同时改::after颜色与竖线--decorator-border的色值即可保持一致。所有样式集中在 style.css结构在 resume.html改动一处、全局生效这正是纯 HTML/CSS 模板易于定制的原因见 README.md 中对高度可定制性的说明。导出 PDF 前的验证清单圆点对齐属于屏上看着对、打印就错位的高危问题导出前建议按 README.md 中的步骤逐项检查Firefoxabout:config去掉页面边距勾选打印背景色取消忽略缩放Chrome边距设为 None勾选背景图形导出后放大检查圆点白边无脏边、竖线没有从圆点中间穿出、圆点圆心压在竖线上。小结白边圆圈 两个同心实心圆伪元素::before白圆 ::after灰圆是对 Firefox 描边渲染 bug 的优雅绕行时间线圆点对齐 竖线位置 px 级偏移变量小尺寸一律用px保证精度所有细节都集中在 style.css 的.decorator相关规则里读懂这一小段你就掌握了伪元素 CSS 变量 打印场景三个高频考点的实战组合。【免费下载链接】html-resumeA single-page resume template completely typeset with HTML CSS.项目地址: https://gitcode.com/gh_mirrors/ht/html-resume创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考