如何用Chrome DevTools测量CSS repeating-linear-gradient长度并对齐文本

一、实现不同Bootstrap断点下文本与横线精准对齐 #

核心思路是让文本行高和渐变间隔完全绑定，用CSS变量统一控制，避免断点下参数脱节：

1. 定义全局CSS变量，统一渐变间隔和行高

:root {
  /* 基础断点下的笔记本横线间隔 */
  --notebook-line-gap: 38px;
  /* 行高直接绑定间隔，确保每行文本刚好占一个间隔高度 */
  --notebook-line-height: var(--notebook-line-gap);
}

2. 配置笔记本容器的渐变与文本样式

.notebook-container {
  /* 实现横线渐变：透明到灰色线，重复间隔由变量控制 */
  background: repeating-linear-gradient(
    transparent,
    transparent calc(var(--notebook-line-gap) - 1px),
    #dcdcdc calc(var(--notebook-line-gap) - 1px),
    #dcdcdc var(--notebook-line-gap)
  );
  /* 强制行高与间隔一致 */
  line-height: var(--notebook-line-height);
  /* 微调顶部内边距，让文本基线刚好落在横线中间（根据字体调整数值） */
  padding-top: 6px;
  /* 清除默认边距，避免干扰对齐 */
  margin: 0;
  padding-left: 1rem; /* 可选：模拟笔记本左侧留白 */
}

3. 针对Bootstrap断点同步调整变量
   用Bootstrap的断点媒体查询，统一修改变量值，保证行高和渐变间隔始终同步：

/* 小屏幕断点（sm）下调整间隔 */
@media (max-width: 576px) {
  :root {
    --notebook-line-gap: 32px;
  }
}

/* 中等屏幕断点（md）下调整间隔 */
@media (min-width: 768px) {
  :root {
    --notebook-line-gap: 40px;
  }
}

注意事项：

• 不要使用Bootstrap自带的lh-*类，避免覆盖自定义行高
• 若修改字体大小，需同步调整--notebook-line-gap，保证文本在横线间的居中效果

二、用Chrome DevTools测量渐变重复长度 #

有两种简单方法：

方法1：通过渐变编辑器查看 #

1. 打开Chrome DevTools（快捷键F12或右键页面→检查）
2. 在「Elements」面板找到应用渐变的元素，在「Styles」栏找到background属性
3. 点击background旁的渐变预览小方块，打开渐变编辑器
4. 在编辑器中可以直观看到每个渐变周期的起止位置（比如从0px到38px为一个周期），直接读取间隔长度

方法2：用测量工具直接量取 #

1. 点击DevTools右上角的「⋮」→「More Tools」→「Measure」
2. 鼠标在页面上点击第一条横线，拖动到下一条横线，DevTools会显示两条线之间的像素距离，就是渐变的重复长度

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