noshade 在 HTML5 中已完全移除，Chrome/Firefox/Safari/Edge 全部忽略，仅旧 IE 有不可靠响应；必须用 CSS 替代，且需同时设置 height、border: none 和 background-color 才生效。
直接结论：noshade 在 HTML5 中已完全移除，Chrome/Firefox/Safari/Edge 全部忽略它，只在极旧 IE 中有不可靠响应；必须用 CSS 替代，且不能只改 color 或只设 height —— 那些都不起作用。
为什么noshade写上也没效果
浏览器对 <hr> 的默认渲染机制不统一：有的用 border-bottom，有的用 background-color + height，还有的混合使用。而 noshade 既不控制 border，也不控制 background，只是个被废弃的语义提示。现代解析器看到它就跳过，继续按 UA 默认样式画一条带阴影的线。
常见错误现象包括：
- 写了
<hr noshade>，但线还是灰中带亮边（阴影） - 复制了旧模板里的
<hr size="1" color="red" noshade>，结果线变粗、偏蓝、甚至消失 - 在 XHTML 或 HTML5 校验器里报错：
Attribute noshade not allowed on element hr
真正生效的 CSS 写法（三选一）
关键不是“去掉阴影”，而是“明确指定怎么画这条线”。所有现代浏览器（Chrome 120+、Firefox 115+、Safari 17+、Edge 120+）都验证通过：
立即学习“前端免费学习笔记（深入）”；
-
最简方案：
<hr style="height: 1px; border: none; background-color: #ccc;"> -
兼容老 Android WebView（4.4）：
<hr style="height: 1px; border: 0; background-color: #999; margin: 1em 0;">（border: 0比border: none在部分老内核里更稳） -
项目级复用推荐：
<hr class="hr-solid">，配合 CSS：.hr-solid { height: 1px; border: none; background-color: #666; margin: 1.2em 0; }
容易踩的坑：别只清 border 或只设 color
<hr> 是替换元素，它的视觉表现不响应 color 属性 —— 即使你写 color: red，也完全无效。真正起效的是两条路径：
- 用
border（推荐border-top或border-bottom），例如：border-top: 1px solid #666; - 用
background-color+height，但必须同时加border: none或border-width: 0，否则 border 会盖住 background
另外要注意：
- 在 Flex 容器中，
height可能被忽略，需加align-self: flex-start或display: block - 高 DPR 屏幕（如 Retina）下
height: 1px可能模糊，必要时可用transform: scaleY(0.5)配合transform-origin: top，但要慎用——它会弱化语义强度 - 如果页面没有统一的
<hr>基础重置规则，单点修复只会让问题在别的地方复现
动手前先 inspect 元素，看浏览器实际应用了哪些 UA 样式；真正麻烦的从来不是怎么写那行 CSS，而是团队里还有人从旧模板里复制带 noshade 的 <hr> —— 那条线出问题，八成是因为 reset 没覆盖到，或者用了 border 却忘了清 background。
