本文介绍一种基于 CSS 渐变背景的优雅方案，替代传统多 div 画线方式，实现稳定、可扩展的笔记本纸张视觉效果——红边竖线 + 等距横线，且文本自然居中于行间，不干扰线条布局。
本文介绍一种基于 CSS 渐变背景的优雅方案，替代传统多 div 画线方式，实现稳定、可扩展的笔记本纸张视觉效果——红边竖线 + 等距横线，且文本自然居中于行间，不干扰线条布局。
要打造真实感强、维护性高的“笔记本纸张” UI，关键在于解耦装饰性线条与内容流。原方案使用 30+ 个 <div> 绝对定位绘制横线，不仅代码冗余，更因 <code>position: absolute 使线条脱离文档流——一旦添加文本或调整字体大小，所有 top: X% 值都会失准，导致文字“浮”在线条之上或错位。
✅ 正确解法：用 background-image 的多重渐变 + background-size: 100% 1lh
CSS lh 单位（line height）是本方案的核心——它让横线间距自动跟随文本行高变化，真正实现“文字写在哪，线就在哪”。同时，红边竖线通过横向线性渐变精准控制起始位置（如 5ch），避免像素偏移。
以下是完整、可直接运行的实现代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Patrick Hand', cursive;
line-height: 1.6; /* 建议显式定义，确保 1lh 可预测 */
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.topheader {
padding: 1rem 0;
text-align: center;
font-size: 1.8rem;
font-weight: 400;
}
.notebook {
--red-line-start: 5ch; /* 红线左侧起始位置（字符宽度）*/
--red-line-end: calc(var(--red-line-start) + 2px); /* 红线宽度 */
flex: 1;
padding: 1.5rem calc(1ch + var(--red-line-start)) 1.5rem 1.5rem;
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)
),
/* 蓝色横线：重复渐变，高度 = 1 行高 */
linear-gradient(lightskyblue 1px, transparent 1px);
background-size: 100% 1lh; /* 横线间距 = 当前行高 */
background-repeat: repeat-y;
/* 确保横线从顶部开始对齐 */
background-origin: content-box;
}<div class="container">
<div class="topheader">
<h1 class="header">DenardRaps</h1>
</div>
<div class="notebook">
<p>第一行文字 —— 自动对齐在横线下方</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>第二行文字 —— 行距随字体缩放自适应</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>第三行……试试加大字体：<span style="font-size: 1.4em;">看！横线同步下移</span></p>
</div>
</div>? 关键优势说明：
- ✅ 零布局干扰：线条是背景，文本自由流式排版，无需
position: absolute或top计算； - ✅ 响应式友好：
1lh随font-size和line-height动态调整，缩放/换字体不破型； - ✅ 语义清晰：HTML 仅含语义化内容结构，无装饰性空 div；
- ✅ 易定制：修改
--red-line-start调整红线位置，改lightskyblue换横线色，增background-position微调起始偏移。
⚠️ 注意事项：
-
lh单位需现代浏览器支持（Chrome 89+、Firefox 75+、Safari 15.4+），旧版本可降级为1.6em（需与line-height一致）； - 若需打印支持，请额外添加
@media print { .notebook { background-color: white; } }避免背景被裁剪； - 红线建议用
ch（字符宽度）而非px，更适配不同字体宽度，确保始终位于“装订侧”。
这种基于 CSS 背景的实现，不仅大幅精简代码、提升性能，更从根本上解决了“文字推移线条”的顽疾——让笔记本页面真正成为承载内容的优雅画布，而非需要不断微调的像素迷宫。
