线条变粗需从五方面修正：一、重置边框样式并设box-sizing: border-box；二、禁用字体平滑与子像素渲染；三、用SVG替代CSS边框；四、按DPR校准CSS像素映射；五、隔离渲染上下文避免模糊。
如果您将PSD设计稿切图并转换为HTML5页面后发现线条比原稿明显变粗，通常是由于CSS中边框、描边或字体渲染设置导致的像素偏差。以下是修正此问题的操作步骤：
一、检查并重置边框和轮廓样式
浏览器默认会为某些元素（如input、button、a等）添加系统级outline或border，且在高分屏下可能触发亚像素渲染，造成视觉加粗。需统一清除并显式定义。
1、在CSS全局重置区域添加以下规则：
2、为所有带边框的元素设置box-sizing: border-box，避免padding/border额外撑大尺寸。
立即学习“前端免费学习笔记（深入）”；
3、对目标线条容器（如.line、.divider）强制指定border: 1px solid #000，并附加transform: translateZ(0)以启用独立图层，防止抗锯齿模糊导致的视觉增粗。
二、禁用字体平滑与子像素渲染
部分浏览器（尤其是Chrome和Safari）在渲染细线文字或伪元素线条时启用-webkit-font-smoothing或subpixel-antialiased，会使1px线条实际占据1.2–1.5px物理像素。关闭该特性可恢复精确像素控制。
1、在html或body选择器中加入：-webkit-font-smoothing: none。
2、添加-moz-osx-font-smoothing: grayscale以同步Firefox on macOS行为。
3、对线条所在元素额外设置text-rendering: geometricPrecision，确保SVG内联线条或伪元素::before/::after生成的线不被字体渲染引擎干预。
三、使用SVG替代CSS边框绘制细线
CSS border在缩放或DPR>1设备上易失真，而SVG path可严格锚定1物理像素，支持devicePixelRatio适配，是高保真线条的最佳载体。
1、将原CSS border替换为内联SVG，宽高设为100%，viewBox=”0 0 1 1″。
