color属性支持英文关键字（如red）、十六进制（#ff6b35）、RGB/RGBA、HSL/HSLA；失效主因是层叠覆盖、继承干扰、SVG需fill设置；currentColor可复用计算色值，适配深色模式需结合prefers-color-scheme媒体查询。
color 属性能直接设置哪些颜色值
CSS 的 color 属性接受多种格式的颜色值，不是只有英文名可用。常用且稳妥的包括：
• 英文关键字（如 red、transparent），但支持有限，约 140 个，orange 可用，skyblue 可用，但 lightseagreen 这类带空格的不行（得写成 lightseagreen —— 它是单个关键字）
• 十六进制（#ff6b35、#f63），注意大小写不敏感，但建议小写统一
• RGB / RGBA（rgb(255, 107, 53)、rgba(255, 107, 53, 0.8)），Alpha 值 0–1，不是 0–100
• HSL / HSLA（hsl(14, 100%, 60%)），对设计调整更直观，但旧版 IE 不支持 HSLA 透明度
color 设置后为什么没生效
最常见原因是层叠（cascade）和继承被覆盖：
• 检查是否被更高优先级的选择器覆盖，比如 body { color: #333; } 被 p.special { color: #f00 !important; } 或内联样式覆盖
• 父元素设了 color，子元素未显式声明时会继承，但若子元素有其它规则（如伪类 a:hover）或使用了 currentColor，行为可能意外
• color 不影响已设置 fill 或 stroke 的 SVG 文本，SVG 中文本颜色需单独设 fill
• 浏览器默认样式表可能干扰，例如某些 UA 样式会给 a 设 color: -webkit-link，需显式重写
color 和 currentColor 的实际配合场景
currentColor 是一个动态关键字，取当前元素的 color 计算值，常用于保持配色一致性：
• 图标字体（如 Font Awesome）里，i { color: #007bff; } + i::before { color: currentColor; } 可让图标自动随文字变色
• 边框与文字同色：button { color: #28a745; border: 1px solid currentColor; }
• SVG 内联时复用：svg { width: 1em; height: 1em; color: #6c757d; }，再在 <path fill="currentColor"></path> 中引用
注意：它不能用于 background-color 等非继承属性的“间接”引用，只在支持它的属性中生效（如 border-color、fill、stroke）
深色模式下 color 如何适配
纯靠 color 本身无法响应系统主题，必须结合媒体查询：
• 使用 @media (prefers-color-scheme: dark) 重置颜色：
body { color: #333; }
@media (prefers-color-scheme: dark) {
body { color: #e9ecef; }
}• 更可靠的方式是定义 CSS 自定义属性：
:root {
--text-primary: #333;
}
@media (prefers-color-scheme: dark) {
:root { --text-primary: #e9ecef; }
}
p { color: var(--text-primary); }• 注意：不要依赖
color-scheme: light dark 声明来自动切换文字色，它只影响表单控件和滚动条等 UA 控件，对自定义文本无效
真正容易被忽略的是 currentColor 的计算时机——它取的是该元素最终计算出的 color 值，而不是声明值；如果父元素用了 inherit 或变量未定义，结果可能出人意料。 
