如何用 CSS 渐变实现真正的笔记本纸张效果（带红边线与等距横线）-html教程-PHP中文网

如何用 CSS 渐变实现真正的笔记本纸张效果（带红边线与等距横线）

本文介绍一种基于 CSS linear-gradient 背景渐变的优雅方案，替代冗余的 DOM 元素堆叠，实现稳定、可扩展、响应式的笔记本纸张视觉效果——红边竖线 + 等距横线，并确保正文文本自然居中于行间，不受字体大小或外边距干扰。

本文介绍一种基于 css `linear-gradient` 背景渐变的优雅方案，替代冗余的 dom 元素堆叠，实现稳定、可扩展、响应式的笔记本纸张视觉效果——红边竖线 + 等距横线，并确保正文文本自然居中于行间，不受字体大小或外边距干扰。

传统做法（如问题中所示）通过数十个 <div> 模拟横线和竖线，虽直观但存在严重缺陷：所有线条使用 <code>position: absolute，导致它们脱离文档流；一旦插入文本内容（尤其是设置了 font-size 或 margin 的段落），父容器高度计算失效，线条位置漂移、错位，维护成本极高，且无法响应式适配不同字号或屏幕尺寸。

核心解决方案：用 CSS 背景渐变绘制线条
CSS background-image 支持多层渐变叠加，配合 background-size 与 1lh（1 倍当前行高）单位，可精准控制横线间距；而竖线则通过横向渐变在指定水平位置“切出”一条细红线。关键优势在于：背景不参与布局，完全独立于内容元素——无论你在 .notebook 内添加多少 <p></p>、调整 font-size 或 line-height，线条位置恒定不变，文本自然流式排布于行间。

以下是精简、健壮、可复用的实现代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notebook {
  --red-line-start: 5ch;     /* 红线起始位置（从左边缘起 5 个字符宽度） */
  --red-line-end: calc(var(--red-line-start) + 2px); /* 红线宽度：2px */

  flex: 1;
  /* 双层背景：第一层为左侧红竖线，第二层为等距横线 */
  background-image:
    linear-gradient(to right,
      transparent var(--red-line-start),
      red var(--red-line-start),
      red var(--red-line-end),
      transparent var(--red-line-end)
    ),
    linear-gradient(lightskyblue 1px, transparent 1px);
  /* 横线间距 = 1 行高（自动适配 font-size 和 line-height）*/
  background-size: 100% 1lh;
  /* 左侧内边距预留红竖线空间 + 适当留白 */
  padding-left: calc(var(--red-line-start) + 1ch);
  /* 确保文本基线对齐横线（推荐设置 line-height ≥ 1.4）*/
  line-height: 1.5;
  font-size: 18px;
}

.topheader {
  font-family: "Patrick Hand", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 100;
  padding: 1rem 0;
  background-color: #f9f9f9;
}

<div class="container">
  <div class="topheader">
    <h1 class="header">DenardRaps</h1>
  </div>

  <div class="notebook">
    <p>第一行文字 —— 自然位于两条横线之间。</p>
    <p>第二行文字 —— 无需任何定位，随内容自动换行对齐。</p>
    <p>尝试修改 .notebook 的 font-size：线条间距会自动按新行高缩放，始终保持精准对齐。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </div>
</div>

✅ 关键技巧说明：

1lh 是 CSS Level 4 中的动态单位，代表当前元素的 line-height 值，比固定像素（如 24px）或百分比更语义化、更鲁棒；
--red-line-start: 5ch 使用 ch 单位（以 “0” 字符宽度为基准），使红竖线位置与字体自然关联，比 15% 更可靠；
所有文本直接写在 .notebook 内，由浏览器默认流式布局，完全规避 position: absolute 引发的重叠与偏移问题；
如需模拟“铅笔手写感”，可额外添加 font-family: "Patrick Hand"、轻微 text-shadow: 0 0 2px rgba(0,0,0,0.1) 及 letter-spacing: 0.5px。

⚠️ 注意事项：

确保 .notebook 设置了明确的 font-size 和 line-height，否则 1lh 将退化为默认值（通常 1em），影响横线密度；
若需支持旧版浏览器（不支持 lh 单位），可降级为 background-size: 100% 24px 并配合固定字号；
红竖线颜色、宽度、位置均可通过 CSS 自定义变量实时调整，便于主题切换。

此方案将“纸张”抽象为纯视觉层（背景），将“书写”归还给语义化内容，兼顾表现力、可维护性与现代 CSS 最佳实践。