hr实现渐变色分隔线必须用background+height+border:none三者缺一不可，因浏览器将hr视为替换元素，默认用border-bottom渲染，border-top不支持linear-gradient()导致声明失效。
hr 要实现渐变色分隔线，不能靠 color 或 border-color，必须用 background + height，且必须先清掉默认边框。
为什么 border-top 无法实现渐变
浏览器把 hr 当作替换元素，默认用 border-bottom 渲染那条线；border-top 只支持纯色、虚线、点线等简单样式，不支持 linear-gradient()。一旦你写 border-top: 2px solid linear-gradient(...)，整条声明会被忽略——CSS 语法直接报错或静默失效。
正确写法：background + height + border:none
必须三者同时出现，缺一不可：
-
border: none—— 不写会导致某些浏览器（如旧版 Safari）叠加默认边框 -
height: 2px（或具体像素值）——background需要一个“容器高度”来渲染渐变 -
background: linear-gradient(...)—— 渐变方向建议用to right或to bottom，避免在移动端因宽高比异常导致色带拉伸
示例：
立即学习“前端免费学习笔记（深入）”；
hr {
border: none;
height: 3px;
background: linear-gradient(90deg, #4a6fa5, #6b8dcc, #8cc1e9);
margin: 1.5em 0;
}
响应式与兼容性注意点
渐变在现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+）完全支持，但有三个实际坑：
-
overflow: hidden必须加——否则部分 Safari 版本会渲染出模糊边缘或锯齿 - 不要设
padding——hr不是容器，加了无效；想撑开间距请用margin - 宽度控制用
max-width+margin: auto，别碰width属性——Flex/Grid 容器里它行为不可控
响应式粗细可这样写：
@media (max-width: 768px) {
hr {
height: 1px;
}
}
真正容易被忽略的语义前提
所有样式技巧都成立的前提是：hr 确实该出现在这里。如果两段文字只是视觉上需要空隙，或者卡片之间想加线，就该用 border-top 在父容器上画，而不是硬塞一个 hr。每次写 <hr> 前，得确认前后内容是否发生了主题切换——比如“用户反馈”结束 → “开发日志”开始。否则再漂亮的渐变，也是语义污染。
