应优先用语义化的 <hr /> 表示段落主题转换，纯视觉分隔则用 div+border；需重置默认样式、注意高 DPR 屏幕渲染、兼顾可访问性与兼容性。
用 <hr> 最简单，但默认样式丑怎么办
直接写 <hr> 就能出分割线，浏览器原生支持，不用 JS、不依赖 CSS 框架。但它默认带阴影、上下外边距大、颜色灰暗，嵌在现代布局里常显得突兀。
实操建议：
- 必须重置
margin：加hr { margin: 0.5em 0; }避免意外撑开容器 - 改颜色别只用
color——hr是替换元素，得用background-color或border-color（取决于是否清除了border） - 想变细线？删掉默认
border，用height: 1px+background-color更可控 - 注意：部分老安卓 WebView 对
hr的background渲染异常，稳妥起见可补一句border: none
用 div + border 更灵活，但别漏了 height 或 line-height
当需要响应式粗细、渐变色、虚线、或两侧带文字（如“或者”）时，<hr> 不够用，<div class="divider"></div> 是更通用的解法。
常见错误现象：div 没内容、没设置高度，结果看不见线；或者用了 height: 0 却忘了配 border-top，页面留白却无分隔。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 最简写法：
<div style="border-top: 1px solid #e0e0e0;"></div>—— 不设height也行，靠 border 显形 - 要中间带文字？用伪元素或额外
span，别强行塞进hr的alt属性（无效） - Flex 布局里放分割线，记得给
div加align-self: center防止错位 - 性能影响极小，但若页面有上百条分割线，避免每个都写内联 style，统一用 class 更好
hr 的语义和可访问性不能忽略
<hr> 不是装饰品，它是 HTML5 中明确表示“段落主题转换”的语义标签，屏幕阅读器会读作“section break”或类似提示。滥用 div 替代，会丢失这一层含义。
使用场景判断：
- 文章中两个小节之间（如“安装步骤”和“配置说明”）→ 用
<hr> - 卡片底部装饰线、按钮组之间的细线 → 用
div+border，纯视觉用途 - 表单里两个字段组之间？视语义而定：若逻辑上是不同数据域（如“用户信息” vs “支付方式”），
<hr>合理；若只是视觉分隔，选div
兼容性没问题，所有浏览器都支持 <hr> 的语义解析，包括旧版 IE。
移动端适配时，别让分割线在高 DPR 屏幕上发虚
在 iPhone 或高分屏设备上，1px 的 border 或 hr 经常被渲染成 0.5 物理像素，看起来模糊甚至消失。
实操建议：
- 优先用
transform: scaleY(0.5)缩放 2px 边框，比媒体查询写border: 0.5px兼容性更好 - 对
<hr>，可配合@media (-webkit-min-device-pixel-ratio: 2)单独调整height和background - 别用 box-shadow 模拟细线——在某些 Android 浏览器里阴影会糊成一片
- 测试真机，别只信 Chrome 模拟器；特别是微信内置浏览器，对
hr的缩放处理有差异
<hr> 还是 div 时，有没有多想半秒语义和设备。 
