线条变粗需从五方面修正：一、重置边框样式并设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"。
2、用<line x1="0" y1="0.5" x2="1" y2="0.5" stroke="#000" stroke-width="0.001"></line>绘制逻辑1px线（stroke-width=0.001对应1物理像素）。
3、在CSS中对该SVG设置width: 100%; height: 1px; display: block;，并添加image-rendering: -webkit-optimize-contrast防止插值模糊。
四、校准设备像素比下的CSS像素映射
在Retina屏等高DPR设备中，1 CSS像素可能对应2或3物理像素，若未做适配，1px border会被渲染为2px。需通过媒体查询或JavaScript动态注入适配规则。
1、在CSS中添加媒体查询：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .thin-line { transform: scaleY(0.5); transform-origin: top; } }。
2、对目标元素添加position: relative，再用伪元素::after绘制线条，并设置height: 1px; background: #000; transform: scaleY(0.5)。
3、确保该伪元素的content: ""和display: block已声明，且父容器无overflow: hidden裁剪其缩放后边缘。
五、验证并锁定渲染上下文
某些CSS属性（如filter、opacity、will-change）会触发合成层，改变像素对齐方式，导致线条边缘模糊或加粗。需排查并隔离渲染上下文。
1、移除线条元素及其父级上的filter、opacity 、<code>will-change声明。
2、为线条容器添加backface-visibility: hidden与perspective: 1000，强制创建独立合成层但保持像素对齐。
3、使用Chrome DevTools的Rendering面板开启"Paint flashing"与"Layer borders"，确认线条是否跨层渲染或存在意外重绘区域。
