box-shadow四个参数依次控制水平偏移、垂直偏移、模糊半径和扩散半径：x-offset正右负左，y-offset正下负上，blur-radius决定边缘虚化程度（0为硬边），spread-radius正值扩张阴影、负值收缩。
box-shadow 的四个参数分别控制什么
box-shadow 接受至少两个长度值（x-offset 和 y-offset），第三个是 blur-radius（模糊半径），第四个是 spread-radius（扩散半径），最后是可选的 color。顺序不能错，少一个就失效。
-
x-offset：正数向右偏移，负数向左；0 表示居中投影 -
y-offset：正数向下，负数向上；常设为正值让阴影落在元素下方 -
blur-radius：必须为非负数，值越大越虚化；0 就是硬边阴影 -
spread-radius：可正可负；正值让阴影整体放大一圈，负值收缩（容易被忽略但很实用）
单层阴影 vs 多层阴影的实际效果差异
只写一组 box-shadow 很难模拟真实光照层次。浏览器支持用逗号分隔多组值，每组独立计算，叠加后产生更自然的深度感。
- 单层：
box-shadow: 0 4px 12px rgba(0,0,0,0.15)—— 看起来平、薄 - 双层：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15)—— 近处细节+远处弥散，更立体 - 三层以上慎用：渲染开销上升，移动端可能掉帧；优先优化前两层的
blur-radius和opacity
常见错误：阴影被父容器裁剪或完全看不见
阴影本质是绘制在元素「绘制层」之外的，如果父元素设置了 overflow: hidden 或 clip-path，就会把阴影切掉。
- 检查父级是否含
overflow: hidden、overflow: clip或transform（某些情况下触发新层叠上下文并隐式裁剪） - 临时调试：给父元素加
outline: 1px solid red，看阴影是否超出 outline 范围 - 替代方案：不用裁剪，改用
padding预留空间；或对子元素加margin把它“撑开”
深色模式下阴影颜色怎么设才不突兀
直接写 rgba(0,0,0,0.2) 在深色背景上会发灰甚至发亮，失去阴影本意。
立即学习“前端免费学习笔记（深入）”；
- 避免纯黑/纯白：用与背景色相近的暗色，比如深灰背景配
rgba(0,0,0,0.3)，浅灰背景配rgba(0,0,0,0.15) - 用
color-mix()（现代浏览器）动态混合：color-mix(in srgb, #000 30%, var(--bg-color)) - 最稳妥：CSS 自定义属性配合媒体查询切换：
--shadow-color: rgba(0,0,0,0.15);，深色模式里重置为rgba(0,0,0,0.25)
spread-radius 的负值用法和父容器裁剪问题，调阴影时先关掉所有 overflow 再动手。 
