用 linear-gradient 实现分割线需以 background 替代 border，通过控制 color stop 和 height（如 1px）模拟细线，避免语法错误与兼容性问题。
用 linear-gradient 画分割线，本质是给 border 或 background 填充渐变色
纯 CSS 分割线加渐变，不是靠图片也不是靠伪元素堆叠，而是把渐变当“颜料”直接涂在线上。最稳的路子是用 background 替代传统 border，因为 border-image 兼容性差、行为怪，而 background 可控性强、语义清晰。
常见错误是写成：border: 1px solid linear-gradient(...) —— 这语法根本不存在，浏览器直接忽略整条声明。
- 正确姿势：用
height+background模拟线，比如height: 2px的空 div 或 hr - 若必须贴在内容下方（如段落末尾），优先用
::after伪元素 +background，避免占文档流 - 渐变方向别硬套 90deg；水平线用
to right，垂直分隔用to bottom，写反了颜色会横着铺满而不是“拉出一条线”
background: linear-gradient() 的参数怎么配才像一条线
关键不在“渐变”，而在“让渐变窄到只占几个像素”。靠控制颜色停靠点（color stop）实现——把两种颜色都设在 0% 和 1%，中间留出极小过渡区间，视觉上就是实色线；拉开过渡区间，才有柔和渐变感。
错误示范：background: linear-gradient(to right, #f00, #00f) → 整个容器宽都被染成红蓝渐变，不是线。
立即学习“前端免费学习笔记（深入）”；
- 想要实色渐变线（如左红右蓝）：
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%) - 想要带过渡的细线（高光/阴影感）：
background: linear-gradient(to right, #ccc 0%, #999 30%, #666 70%, #333 100%)，再配合height: 1px - 别用百分比写死停靠点；如果线宽变，停靠点也要同比缩放，否则渐变区域会“糊开”或“断开”
在 hr 标签里直接用渐变，要注意什么
hr 默认有 border，但它的 border 不支持渐变，所以必须先清掉默认样式，再用 background 重绘。
典型翻车现场：没写 border: none，结果看到一条灰色实线叠在渐变线上面，以为渐变失效。
- 基础写法：
hr { border: none; height: 1px; background: linear-gradient(...); } - 想加圆角或阴影？
height改成2px后用border-radius: 1px，但注意 Safari 对hr的渲染有时会截断圆角 - 响应式场景下，避免用固定
height；可改用min-height: 1px+background-size控制渐变密度
移动端和老版本 Chrome 的兼容性坑
linear-gradient 在 iOS Safari 6.1+、Android Browser 4.4+ 都支持，但早期安卓微信内置浏览器（X5 内核）对 to right 写法支持不稳定，容易回退成黑线或白线。
不是所有“渐变线”都能无痛上线，尤其嵌在 Hybrid App 里的页面。
- 保底方案：加一层
background-color作为 fallback，写在background声明前面，例如：background-color: #eee; background: linear-gradient(...); - 避免用
transparent做起点色；某些旧内核会把它渲染成黑色，导致渐变发灰 - 真要兼容 IE10？放弃
linear-gradient，改用 SVG 背景图，但那就不是纯 CSS 了
渐变线看着简单，实际卡点全在“怎么让它窄、怎么让它准、怎么让它不塌”。写完记得在真机上拖动滚动，看渐变是否随滚动撕裂——那是 background-attachment 没设对，或者用了 fixed 定位惹的祸。
