纯css无法实现可拖拽、带坐标反馈和吸附逻辑的photoshop式辅助线，rulersguides.js等js库才是正解；css仅能通过position: absolute + border或box-shadow绘制静态辅助线，依赖javascript才能响应交互、计算坐标并执行吸附逻辑。
纯 CSS 无法实现可拖拽、带坐标反馈、吸附逻辑的 Photoshop 式辅助线——RulersGuides.js 这类 JS 库才是正解。CSS 只能模拟静态辅助线视觉效果，且必须配合 JavaScript 才能响应交互。
用 position: absolute + border 画固定辅助线
这是最轻量、零依赖的做法，适合调试时手动标注关键位置。它不随滚动移动，也不吸附元素，但能快速验证布局基准点。
- 水平辅助线：创建一个
div，设height: 1px、background: #ff0000，再用top: 120px定位（单位必须是明确像素或视口单位） - 垂直辅助线：同理，
width: 1px、left: 320px，父容器需设position: relative - 别用
border直接加在 body 或 html 上——它会受 margin/padding 影响，位置不可靠；始终用独立元素 +position: absolute - 如果页面有缩放（
transform: scale()），辅助线也会被缩放，导致像素值失真
mix-blend-mode 不适用于辅助线，别试
有人想用 mix-blend-mode: difference 让辅助线在任意背景上都“反色显示”，结果发现完全没反应。这是因为：
-
mix-blend-mode要求元素有内容且背后有堆叠上下文，而纯色线条（div+background）背后若无其它图层，就无“底色”可混合 - 即使强行套两层
div，浏览器对 1px 线条的混合计算极易丢失精度，实际效果闪烁或不可见 - 真正可用的对比方案是：用
box-shadow: 0 0 0 1px #000替代border，它更稳定，且支持inset模式做内嵌标线
为什么不能只靠 CSS 实现拖拽吸附？
CSS 没有事件监听能力，也无法读取鼠标坐标或 DOM 元素实时尺寸。所谓“吸附”，本质是：mousemove 时计算光标与最近元素边界的距离，若
-
RulersGuides.js的pixelSnapping配置项控制吸附阈值，底层是监听drag事件 +getBoundingClientRect()计算 - 你用
position: fixed把标尺钉在视口，滚动时它不动，但页面内容会移出视野——RulersGuides.js的 “滚动锁定” 功能靠的是动态更新top/left值，不是纯 CSS - 导出/导入辅助线配置（JSON 格式）这种功能，CSS 更是完全无能为力
真要复刻 Photoshop 辅助线体验，别在 CSS 上硬刚。引入 RulersGuides.js，初始化后调用 addGuide('horizontal', 240) 一行代码就能加线，拖拽、吸附、保存全自带——省下的时间够你优化三次渲染性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
