结论：别用 height 固定像素画线，优先用 border-bottom + linear-gradient 伪类背景，配合 flex 或 position: absolute 实现自适应宽度；移动端必须处理 dpr 和缩放导致的线宽失真。
直接说结论：别用 height 固定像素画线，优先用 border-bottom + linear-gradient 伪类背景，配合 flex 或 position: absolute 实现自适应宽度；移动端必须处理 dpr 和缩放导致的线宽失真。
为什么 height: 1px 在 iPhone 上总显得粗糊
你写的 height: 1px 在 dpr=2 的设备上实际渲染为 2 物理像素，浏览器还会做亚像素抗锯齿，结果就是发虚、偏粗、位置漂移。更糟的是，某些安卓 WebView（比如旧版 X5 内核）对 transform: scaleY(0.5) 渲染也不稳定。
- 真正可靠的方案是放弃“设高度”，改用
border-bottom: 1px solid transparent配合background-image: linear-gradient()填充——border本身不支持渐变，但你可以把它当“画布框”，用background覆盖其中一行 - 必须加
viewport声明：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 可能强制缩放，让伪元素错位 - 测试时手动刷新页面，别只靠系统深色模式切换——很多 WebView 不会重绘已挂载的
::after
linear-gradient 当分割线用，参数怎么配才不铺满整个容器
错误写法：background: linear-gradient(to right, #f00, #00f) → 整个元素宽都被染成红蓝渐变，根本不是“一条线”。关键不是渐变本身，而是把渐变压缩到 1–2 像素范围内。
- 实色渐变线（如左红右蓝）：
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或border-bottom - 停靠点别用死百分比；如果线宽要响应式变化（比如从 1px 切到 2px），所有 color stop 位置也要同比缩放，否则中间过渡区会“拉稀”或“断开”
用 flex 实现文字居中、两侧渐变线自适应的写法
这是目前最稳、兼容性最好、且语义清晰的做法。不需要 position: relative 或 overflow: hidden，也不依赖 text-align: center 的隐式行为。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构保持干净：
<div class="divider">中间文字</div> - CSS 核心：
.divider { display: flex; align-items: center; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, #e0e0e0, #999); } - 注意加
margin-left/margin-right留白，避免线贴到文字边缘；若父容器是flex: 1，需确保它没设min-width: auto导致收缩干扰 - 深色模式适配统一走 CSS 变量：
background: linear-gradient(to right, var(--line-start), var(--line-end));，并在:root和@media (prefers-color-scheme: dark)里分别定义
微信小程序里怎么安全用渐变分割线
小程序的 view 不支持 border-image，hr 标签几乎不可用，且部分安卓 X5 内核对 to right 解析异常（回退成黑线）。必须绕过这些限制。
- 禁用默认边框：
border: none必须显式写，否则老版本微信会叠加一层灰色实线 - 用
background替代border，并指定background-size: 100% 1px，比单纯设height更可控 - 避免在
::before/::after中写复杂渐变；深色模式下明暗对比难调，纯色border-bottom更稳妥 - 真要渐变，优先用角度写法（如
linear-gradient(90deg, ...)）而非to right，X5 内核对角度支持更稳定
最易被忽略的一点：渐变分割线的“自适应”本质不是宽度拉伸，而是颜色停靠点与物理像素密度对齐。写死 50% 在 dpr=3 的设备上可能刚好卡在两个物理像素之间，造成模糊。所以要么用变量动态计算，要么干脆放弃百分比，改用 px 或 rem 配合媒体查询微调。
