noshade属性在HTML5中已被彻底移除，现代浏览器（Chrome/Firefox）完全忽略它，仅旧版IE可能响应但不可控；必须用CSS替代，如border: 2px ridge #ccc显式控制立体效果。
hr 的 noshade 属性已彻底失效，别再试了
HTML5 中 noshade 已被完全移除，不是“不推荐”，是解析器直接无视。你在 Chrome、Firefox 里写 <hr noshade> 或 <hr noshade="noshade">，浏览器根本不会读取该属性——它连 DOM 属性列表里都不会出现。旧版 IE 渲染出的“纯色”效果，其实是 UA 样式兜底行为，现代项目里复现不了，也不该依赖。
所谓“立体感”，本质是 border-style 的视觉模拟
早期 noshade 对应的是“无阴影的平面线”，而默认 hr 的 border-style: inset（或 outset）才真正提供立体错觉。所以想保留立体感，不是“去掉 noshade”，而是显式用 CSS 控制 border-style：
-
border-style: inset：默认值，上浅下深，像凹陷进页面 -
border-style: outset：上深下浅，像凸起按钮边缘 -
border-style: groove：双线凹槽，比 inset 更强立体 -
border-style: ridge：双线凸脊，对应 groove 的反向
必须同时设 border-width 和 border-color，否则部分浏览器（如 Safari）会降级为 none。例如：hr { border: 2px ridge #ccc; }
为什么只写 border-style 常常没反应？
因为几乎所有浏览器对 hr 都预设了 border: 1px inset，但这个默认值和你写的 CSS 规则优先级相同，容易被层叠覆盖或相互干扰。常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- 写了
border-style: ridge却没写border-width→ 实际渲染成0px，线消失 - 写了
height: 1px+background-color，但没清border→ 双线叠加，尤其 Firefox 会真画两条 - 在 reset.css 里全局写了
hr { border: 0; }，后续所有立体样式都失效
安全写法是原子化声明：hr.stereo { border: 3px groove #aaa; margin: 1.5rem auto; max-width: 600px; }
暗色模式、高DPI、缩放下的立体线怎么稳住？
立体边框在 zoom: 125% 或 macOS Retina 屏上容易糊、变粗、颜色失真，原因在于 inset/outset 是基于系统灰度计算的，不响应 CSS 变量或媒体查询。实际能控的只有：
- 用固定
border-width（如2px），避免em/rem导致缩放后过粗 - 禁用
border-color: currentColor，改用明确十六进制值，防止暗色模式下自动变黑/白 - 如果必须适配暗色模式，不要依赖
inset的自动反色，改用border-top: 2px solid var(--border-color)+ 自定义变量 - 打印样式表里立体边框常被忽略，需额外加
@media print { hr.stereo { border-style: solid; } }
真正难的不是做出立体效果，而是当用户调大系统字体、开启强制色彩、切换到 OLED 屏时，那条“ridge”线还能保持可辨识的深度感——这时候往往得放弃纯 CSS 边框，转用 box-shadow 模拟明暗分界，或者干脆换语义更准的 div + 背景渐变。
