css3颜色表示方式是对css2的扩展而非替代，新增rgba和hsla支持颜色级透明度及更直观的调色模型，同时完全兼容原有color name、#rrggbb、rgb()等写法。
CSS3 颜色表示方式不是对 CSS2 的“替代”，而是明确扩展——所有 CSS2 支持的颜色写法（color name、#RRGGBB、rgb()）在 CSS3 中完全保留，新增的是更灵活、更语义化、更可控的表达能力。
RGBA 和 HSLA：透明度不再依赖 opacity
CSS2 只能靠全局 opacity 控制元素整体透明度，会连带子元素一起变淡；CSS3 引入 rgba() 和 hsla()，让透明度只作用于单个颜色值本身。
-
rgba(0, 0, 0, 0.3)是半透黑，但文字、边框等其他属性不受影响 -
opacity: 0.3会让整个元素及其所有后代都变淡，且无法单独恢复子元素不透明 - HSLA 更适合调色：比如想让主色变浅但保持饱和度，直接改
hsla(200, 80%, 70%, 0.9)中的亮度值即可，不用反复换算 RGB
HSL 模型：比 RGB 更符合人眼直觉
RGB 是面向设备的数值模型，调色时要猜数字；HSL 是面向感知的模型，参数含义直观：
-
hsl(0, 100%, 50%)→ 纯红（0° 在色轮上就是红色） -
hsl(120, 100%, 50%)→ 纯绿（120°） - 想让一个蓝色变“灰一点”？降
S（饱和度）就行；变“亮一点”？升L（亮度），不用动 R/G/B 三个数 - CSS2 没有
hsl()，只能硬算或靠工具转换
Color Module Level 3 带来的实际兼容性变化
所谓“CSS3 颜色”本质是 Color Module Level 3 标准，它不是一次性全支持，而是按函数/语法渐进落地：
-
hsl()和rgba()在 IE9+、Chrome 1+、Firefox 3+ 就已支持，不是“新浏览器才用” -
hsla()和rgba()在同一时期支持，无需额外 polyfill - 真正要注意的是旧版 IE（IE8 及以下）：不支持任何函数式写法，只认
#RRGGBB和命名色，必须提供回退 -
#RRGGBBAA（八位十六进制）是 Level 4 特性，目前仅 Chromium 111+ 和 Safari 16.4+ 支持，不能当作通用方案
真正容易被忽略的点在于：HSL 的 L（亮度）不是简单明暗调节——hsl(0, 100%, 0%) 是纯黑，hsl(0, 100%, 100%) 是纯白，中间 50% 才是“标准饱和色”。调错亮度值，可能意外得到灰黑或灰白，而不是想要的浅红或深红。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
