如何使用CSS绘制类似Firefox开发者工具的蓝色辅助参考线？

下面两种常用方案都可以实现对应效果：

方案1：border实现单条跟随鼠标的参考线 #

适合做元素审查时的十字参考线效果，和火狐开发者工具的交互逻辑完全一致：

CSS代码 #

/* 参考线通用样式 */
.guide-line {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.8;
}
/* 垂直参考线 */
.vertical-guide {
  top: 0;
  height: 100vh;
  width: 0;
  border-left: 1px dashed #0a84ff;
}
/* 水平参考线 */
.horizontal-guide {
  left: 0;
  width: 100vw;
  height: 0;
  border-top: 1px dashed #0a84ff;
}

鼠标跟随逻辑（可选） #

如果需要让参考线跟随鼠标移动，添加少量JS即可：

document.addEventListener('mousemove', e => {
  document.querySelector('.vertical-guide').style.transform = `translateX(${e.clientX}px)`
  document.querySelector('.horizontal-guide').style.transform = `translateY(${e.clientY}px)`
})

方案2：渐变实现网格参考线 #

如果需要整页的网格辅助线，用CSS线性渐变实现更简便：

.grid-guides {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  /* 每20px生成一条蓝色虚线参考线 */
  background-image: 
    linear-gradient(to right, #0a84ff80 1px, transparent 1px),
    linear-gradient(to bottom, #0a84ff80 1px, transparent 1px);
  background-size: 20px 20px;
}

• pointer-events: none是核心属性，可以让参考线不响应任何鼠标交互，不会遮挡下层页面元素的点击、悬停等操作
• 颜色值#0a84ff是火狐开发者工具的标准蓝色，添加适当透明度可以避免遮挡页面内容
• 使用fixed定位可以让参考线相对于浏览器视口固定，页面滚动时不会错位

内容的提问来源于stack exchange，提问作者radiorz