CSS中仅有color、background-color等少数颜色属性，其余均为颜色值；颜色表现力源于丰富的值系统而非属性数量，错误将颜色值当属性会导致语法错误。
CSS 里根本不存在「100个颜色属性」——这是对 CSS 颜色体系的严重误解。真正可用的颜色相关属性只有 color、background-color、border-color、outline-color、fill、stroke 等寥寥几个，其余全是「值」，不是「属性」。
别把 color 值当属性用
CSS 颜色表现力强，是因为值系统丰富，不是因为属性多。把 hsl(240 100% 50%) 或 #3b82f6 当成独立属性，会直接导致语法报错或样式不生效。
-
color是属性，red/rgb(255, 0, 0)/var(--primary)是它的合法值 - 浏览器只认标准属性名；写
hsl-color: ...或hex-color: ...属于自造语法，完全无效 - 所有颜色值都必须赋给具体属性，没有“全局颜色声明属性”这种东西（
@property是另一回事，且不专用于颜色）
color / background-color / border-color 的行为差异
这三个最常用，但继承性、默认值和渲染层级完全不同，混用容易出视觉 bug。
-
color可继承，影响文本及部分 SVG 内联元素（如currentcolor的取值来源） -
background-color不继承，默认为transparent，设为inherit时取父级background-color（注意：不是取color） -
border-color不继承，默认按border-style推导：无边框则无色；实线边框默认用color值，但显式设为transparent或initial会覆盖该逻辑
rgba() / hsla() 透明度陷阱
很多人以为 rgba(0, 0, 0, 0.5) 和 opacity: 0.5 效果一样，其实它们作用机制完全不同，叠加使用极易引发意料外的透底。
立即学习“前端免费学习笔记（深入）”；
-
rgba()只影响当前颜色通道的 alpha，不改变子元素；opacity会让整个元素及其后代一起变透明 - 对半透明背景用
rgba()，但若同时设了opacity，子元素文字也会变淡，可能看不清 - 在 backdrop-filter 场景下，
rgba()背景仍可被模糊穿透，而opacity会导致整个区域模糊+变暗，效果失控
现代颜色函数的兼容性现实
lab()、lch()、color(display-p3 ...) 确实存在，但不能当主力用——尤其涉及 iOS Safari 16.4 之前、Android WebView 或旧版 Electron。
- Chrome 111+、Firefox 117+、Safari 16.4+ 支持
oklch()，但 Safari 16.0–16.3 会静默忽略整条声明 -
color-mix()在 Safari 中至今（2024 年中）未实现，Edge 116+ 才开始支持 - 用
@supports (color: oklch(0 0 0))做渐进增强是可行的，但别忘了 fallback 必须是完整声明，比如：color: #3b82f6; color: oklch(65% 0.25 260);
颜色的本质是「怎么表达」和「在哪生效」两个问题。属性极少，值极多；语法简单，组合复杂。最容易被忽略的是：同一个颜色值，在不同属性上下文中，可能触发完全不同的渲染路径（比如 currentcolor 在 border 和 filter: drop-shadow() 中的行为就不一致）。
