优先选用 rgba()，因其可精确控制色调与透明度；#000 或 #333 在深色背景上不可见，浅底上又过于生硬，而 rgba(0,0,0,0.08)～rgba(0,0,0,0.15) 等组合能实现柔和浮起效果。
box-shadow 颜色选 rgba 还是 hex？
直接用 #000 或 #333 写阴影，深色背景下几乎看不见；纯黑在浅底上又太生硬、缺乏层次。真正可控的是 rgba()：前三个值定色调，第四个透明度决定“压感”强弱。
常见搭配建议：
- 浅色按钮（如
background: #fff）配rgba(0, 0, 0, 0.08)～rgba(0, 0, 0, 0.15)，模拟柔和浮起 - 深色按钮（如
background: #222）必须换浅色阴影，比如rgba(255, 255, 255, 0.06)，否则完全失效 - 彩色按钮（如
background: #4a90e2）可微调阴影色相：用rgba(74, 144, 226, 0.2)做同色系加深，比纯黑更协调 - 避免
hsl()或hwb()—— 老版本 Safari 不支持，且调试时颜色预览不可靠
多层 box-shadow 的颜色顺序怎么排？
浏览器按声明顺序从下往上叠阴影，**最左边的最先绘制、被盖在最底下**，所以要让“远光”在外、“近光”贴边。
例如霓虹效果：box-shadow: 0 0 5px #f0f, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #00f
- 第一层
#f0f模糊最大、最淡，营造外围光晕 - 中间两层
#0ff强度递增，形成主发光带 - 最后一层
#00f模糊最小、最实，紧贴文字边缘增强轮廓 - 所有层必须保持相同偏移（如全用
0 0），否则错位成“鬼影” - 别把深色层写在最后——它会盖住前面所有光，变成一块黑斑
深色模式下阴影颜色怎么不翻车？
@media (prefers-color-scheme: dark) 里不能只改背景，阴影也得重写。系统深色模式下，rgba(0,0,0,0.1) 在 #121212 上几乎隐形。
- 深色背景推荐用浅灰：
rgba(255, 255, 255, 0.05)～rgba(255, 255, 255, 0.12) - 若按钮本身是亮色（如
background: #ff6b6b），阴影可用同色系浅透色：rgba(255, 107, 107, 0.15) - 切忌在深色模式里沿用桌面端的暗色阴影，那不是“低调”，是“消失”
- 真机测试时关掉自动亮度——OLED 屏幕低亮度下，
0.04级透明度根本看不出
移动端按钮阴影颜色容易被忽略的细节
iOS 和部分安卓 WebView 对阴影颜色的渲染有偏差，尤其在高 DPI 屏幕上，rgba(0,0,0,0.2) 可能被解析成接近纯黑，失去层次。
- 安卓低端机建议提升最低透明度到
0.18，iOS 则可压到0.12（但需真机验证） - 避免使用
rgb(0, 0, 0)+ 百分比透明度写法（如rgb(0,0,0) / 12%），兼容性差，部分 Chromium 内核会回退为不透明黑 - 如果按钮带
border-radius，阴影颜色要和圆角弧度匹配：大圆角配扩散型阴影（多层+高模糊），小圆角配紧凑型（单层+低模糊+稍高透明度） - 最关键的不是“配得多好看”，而是“在三星 S22 和 iPhone 15 Pro 同时点下去那一帧，阴影变化是否同步、是否可信”——颜色只是其中一环，它得和
transform: scale(0.98)、inset状态严丝合缝对上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
