color属性用于设置文字颜色，支持关键字、十六进制、rgb、hsl等格式；推荐十六进制或rgb；子元素默认继承父元素color值；半透明应使用rgba/hsla而非opacity；currentcolor可同步文字色至边框/伪元素；高对比度模式下需用forced-colors媒体查询适配系统语义色。
color 属性直接设置文字颜色
用 color 设置文字颜色是最基础的操作，值可以是颜色关键字（如 red）、十六进制（#ff6b35）、rgb（rgb(255, 107, 53)）或 hsl（hsl(14, 100%, 60%)）。浏览器对这些格式支持都很稳定，推荐优先用十六进制或 rgb，语义清晰、便于团队协作。
注意：如果父元素设置了 color，子元素未显式声明时会继承该值——这点常被忽略，导致修改某处文字颜色却影响了深层嵌套文本。
用 rgba 或 hsla 实现带透明度的文字颜色
想让文字半透明，别用 opacity，它会让整个元素（包括背景、边框、子元素）一起变透明。正确做法是直接在 color 中使用 rgba() 或 hsla() 函数：
span {
color: rgba(0, 0, 0, 0.7); /* 黑色，70% 不透明 */
}常见误用：rgb(0,0,0,0.7) 是无效写法——rgb() 不接受 alpha 参数，必须用 rgba()；同理，hsl() 要换为 hsla()。
立即学习“前端免费学习笔记（深入）”；
-
rgba(r, g, b, a)中的a是 0–1 的小数，不是百分比 - IE8 及更早版本不支持
rgba和hsla，如需兼容，得配 fallback 颜色（写在前面） - 某些字体渲染引擎在低 alpha 值下可能出现灰边或发虚，0.1–0.3 区间要实测
currentColor 关键字的实用场景
currentColor 是个动态值，等于当前元素的 color 计算值，常用于图标、边框、伪元素等需要与文字颜色同步的场合：
a {
color: #007bff;
}
a::before {
content: "→";
color: currentColor; /* 自动跟随链接文字色 */
}它不传递透明度——哪怕 color 是 rgba(0,0,0,0.5)，currentColor 在 border-color 中仍会保留 alpha 值，但部分旧版 Safari 对此支持不稳定。
文字颜色在高对比度模式下的可访问性问题
Windows 高对比度模式或 macOS 的“增加对比度”开启后，自定义 color 可能被系统强制覆盖。若没做适配，文字可能变成不可读的黑底黑字或白底白字。
解决方案是加媒体查询检测：
@media (forced-colors: active) {
p, h1, button {
color: CanvasText; /* 使用系统语义色 */
}
}别硬写死 #000 或 #fff，也别依赖 !important 强行维持颜色——这会破坏辅助技术的正常工作。真正难处理的是渐变文字、背景图叠加文字这类复合场景，得结合 background-clip 和 -webkit-text-fill-color 细调。
