最直接方式是用 rgba() 函数设置 box-shadow 或 text-shadow 颜色值，通过 r、g、b 和 0～1 的 alpha 控制半透明效果，兼容性好、语义清晰；避免 opacity 或 #RRGGBBAA 等不推荐写法。
css 中定义半透明阴影颜色，最直接的方式就是使用 rgba() 函数设置 box-shadow 或 text-shadow 的颜色值。
用 rgba() 设置 box-shadow 半透明阴影
rgba() 允许你指定红、绿、蓝三通道值，以及一个 0～1 范围的 alpha 透明度。alpha 值越小，阴影越透明；为 0 时完全不可见，为 1 时完全不透明。
示例：
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
这表示：水平偏移 0、垂直偏移 4px、模糊半径 12px、颜色为黑色且透明度 30% 的阴影。
立即学习“前端免费学习笔记（深入）”；
- 避免用
hsla()或十六进制 + opacity（后者会作用于整个元素，不是仅阴影） - 多个阴影可叠加，每项都可独立用 rgba 控制透明度：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05); - 注意模糊半径和透明度配合——高模糊 + 高透明易导致阴影“看不见”，可适当加大模糊或提高 alpha
用 rgba() 设置 text-shadow 半透明文字阴影
语法与 box-shadow 类似，只是应用于文字。同样推荐用 rgba() 精确控制阴影颜色与透明度。
示例：
text-shadow: 2px 2px 4px rgba(255, 100, 50, 0.6);
生成向右下偏移、略带模糊、橙红色半透明的文字投影。
- 文字阴影通常比 box-shadow 更轻量，alpha 建议设在 0.3～0.7 之间，太低看不清，太高显生硬
- 可叠加多层 text-shadow 实现渐变或立体效果，每层 rgba 可不同
- 慎用在浅色背景上的浅色 rgba 文字阴影，对比度不足会影响可读性
常见误区提醒
容易混淆的几种写法要避开：
- ❌ box-shadow: 0 0 10px #000; opacity: 0.5; ——
opacity会让整个元素（含内容）变透明，不是只影响阴影 - ❌ box-shadow: 0 0 10px #00000080; —— 虽然部分浏览器支持 8 位 hex（#RRGGBBAA），但兼容性不如 rgba，尤其旧版 safari/IE 不支持
- ✅ 推荐统一使用
rgba(r, g, b, a)，兼容性好、语义清晰、调试直观
小技巧：快速估算常用透明度
把百分比转成小数更高效：
- 10% → 0.1，20% → 0.2，…，80% → 0.8，90% → 0.9
- 常用组合：轻微阴影用
rgba(0,0,0,0.05)~0.15；卡片浮起感常用0.2~0.3；强调型阴影可用0.4~0.6 - 深色背景上可用
rgba(255,255,255,0.1)做浅色阴影，避免突兀