box-sizing: border-box 在高对比度模式下仍有效，但仅影响尺寸计算，不解决系统级颜色覆盖问题；需配合 @media (prefers-contrast: high) 和 (forced-colors: active) 显式设置 border、禁用 background-image，并声明 color-scheme 以适配原生控件。
box-sizing: border-box 在高对比度模式下是否仍然有效
有效，但仅解决尺寸计算问题，不解决颜色覆盖。系统高对比模式（如 Windows 高对比主题）会强制重绘所有元素的背景、文字和边框色，box-sizing 控制的是盒模型尺寸逻辑，它不影响系统级样式劫持。
这意味着：即使你用了 *, *::before, *::after { box-sizing: border-box; }，在 @media (prefers-contrast: high) 下按钮仍可能丢失边框、背景图消失、文字被压成纯白/纯黑而不可读——因为这些是系统直接覆盖，不是 CSS 计算错误。
- 务必把
box-sizing当作基础层，不是高对比适配的终点 - 不要指望
padding或border-radius在高对比下保持视觉完整性；系统可能忽略border-radius并强制加粗边框 - 伪元素
::before/::after的背景或渐变大概率失效，需改用border或content文本替代
为什么必须显式设置 border 和禁用 background-image
Windows 高对比主题会强制将所有交互元素渲染为「高亮轮廓 + 无背景」模式，其底层规则是：清除 background（含 background-image、background-gradient）、重置 color 为系统高对比色（如黑底黄字）、并为可聚焦元素添加至少 2px solid 边框。
如果你没在 @media (prefers-contrast: high) 中主动声明 border，浏览器可能用默认细线或干脆不画，导致按钮失去点击感知；若保留 background-image，系统会把它抹掉，留下空白或意外色块。
立即学习“前端免费学习笔记（深入）”；
- 对
button、a、input[type="submit"]等，统一加border: 3px solid currentColor - 用
background-color替代图片，选高对比语义色如#000、#fff、#00f（避免灰阶） - 图标类元素慎用 SVG 内联或
background-image: url(...)，改用content: "→"或border构建几何形状
@media (prefers-contrast: high) 的兼容性陷阱
prefers-contrast: high 在 Chrome 101+、Firefox 95+、Safari 16.4+ 支持良好，但 Safari 16.3 及更早版本只认 reduce，写成 high 会被完全忽略。这不是 bug，是标准演进过程中的阶段性差异。
更麻烦的是：macOS 的「增加对比度」开关触发的是 prefers-contrast: more（非 high），而 Windows 高对比主题才真正对应 high。所以单靠一个媒体查询无法覆盖全部高对比用户场景。
- 必须搭配
@media (forced-colors: active)使用，后者在 Edge 109+、Chrome 109+、Firefox 108+、Safari 16.4+ 均已支持 - 不要写
@media prefers-contrast: high（缺括号）或@media (prefers-contrast: "high")（引号多余） - 测试时别只依赖 DevTools 的模拟开关——它只模拟
prefers-contrast，不触发真实系统级 forced-colors 覆盖行为
color-scheme 如何影响表单控件在高对比下的表现
color-scheme 是一个声明式 CSS 属性，告诉浏览器「本页面支持哪些系统配色方案」。当设为 color-scheme: light dark 时，原生表单控件（input、select、checkbox）在高对比模式下会自动切换为系统语义色（如高亮边框、粗体标签），而不用你手动重写所有样式。
但它只作用于未被自定义样式的控件。一旦你写了 input { background: #eee; }，这个 background 就会被系统强制清空，但控件其他部分（如 focus outline）仍能受益于 color-scheme 声明。
- 全局加
html { color-scheme: light dark; }是低成本高回报操作 - 不要给表单控件设
background或color，除非你准备在@media (prefers-contrast: high)里完整接管所有状态（:focus、:disabled、[aria-invalid]） -
color-scheme不影响自定义组件（如用div模拟的下拉），那些必须靠媒体查询+手动重置
border 可能被系统加粗到 4px，你设的 color 可能被替换成系统高亮黄，而这一切发生时，开发者工具里往往看不到任何报错或警告。 
