用 DevTools 实时调试比手写或在线生成器更可靠，box-shadow 参数顺序为 h-offset v-offset blur-radius spread-radius color，易错点是混淆后两者，多阴影逗号分隔且从左到右渲染。
直接用 CSS box-shadow 手写阴影容易调不准、记不住参数顺序，也难预览效果——别手搓，用浏览器 DevTools 实时调试 + 一套可复用的生成逻辑，比任何“在线生成器”更可靠、更可控。
box-shadow 参数顺序和含义必须记牢
四个数值参数不是随便填的：box-shadow: h-offset v-offset blur-radius spread-radius color;（后两个可省略）。最容易错的是把 blur-radius 和 spread-radius 搞反：前者让阴影边缘变虚，后者让阴影整体扩大（正数向外扩，负数向内缩）。
-
h-offset为正 → 阴影在元素右侧；负值 → 左侧 -
v-offset为正 → 阴影在下方；负值 → 上方 -
blur-radius不能为负；设为0时阴影边缘锐利 - 没写
spread-radius时默认为0，加了才影响阴影尺寸 - 多个阴影用逗号分隔，渲染顺序从左到右（前面的在上层）
用 Chrome DevTools 快速试出理想阴影
打开开发者工具 → 选中元素 → 在 Styles 面板里点击 box-shadow 值右侧的「+」或双击现有值，就能实时输入并看到效果。按住 Shift 键再滚轮，能以 0.1 为单位微调数值，比敲代码改再刷新快得多。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先设
box-shadow: 0 2px 4px rgba(0,0,0,0.1);作为基础卡片阴影 - 想加「浮起感」？叠加第二层：
0 4px 12px rgba(0,0,0,0.15) - 深色背景上阴影要调浅：
rgba(255,255,255,0.08)比默认黑更自然 - 禁用硬件加速导致阴影发虚？加
transform: translateZ(0);强制启用 GPU 渲染
面试常考的阴影陷阱：inset、透明度、伪元素滥用
面试官问“怎么实现内阴影”或“按钮按下时阴影变化”，光写 box-shadow: inset ... 不够，得说清限制和替代方案。
立即学习“前端免费学习笔记（深入）”；
-
inset阴影无法和外阴影共存于同一声明（除非用逗号分隔，但会相互遮挡） -
rgba()的 alpha 值低于0.05时，在部分屏幕/浏览器下几乎不可见，别盲目压低 - 用
::before画阴影再定位，看似灵活，实则增加重排开销，且响应式下难对齐 - 移动端慎用大
blur-radius（如 >20px），iOS Safari 渲染慢，可能掉帧
真正卡人的不是语法，是阴影和 z-index、overflow、transform 层叠上下文的交互——比如父容器 overflow: hidden 会裁掉外阴影，transform 触发新层叠上下文后，阴影可能被其他元素盖住。这些细节不调试根本发现不了。
