box-shadow一行写法需严格按h-offset v-offset blur-radius spread-radius color顺序，单位不可省，元素须有尺寸且非inline，多层阴影用逗号分隔，table加阴影需配合border-radius和overflow:hidden。
直接给元素加 box-shadow 就能实现一行 CSS 阴影，但「一行」不等于「随便写一行」——参数顺序错、单位漏、颜色缺、元素没尺寸，都会让阴影消失或变形。
box-shadow 一行写法必须严格按顺序
box-shadow 的标准语法是固定五参数（后两个可省略），顺序不能乱：
h-offset v-offset blur-radius spread-radius color
常见错误是把 color 写在最前，或漏掉单位（如写 5 5 10 black 而非 5px 5px 10px black），浏览器会整个声明忽略。
- 必须带单位的参数：
h-offset、v-offset、blur-radius、spread-radius（哪怕为0，也得写0px才稳妥） -
color不能省，rgba(0,0,0,0.2)比纯黑更自然，推荐优先用 -
spread-radius省略时默认为0，但显式写出（如0px）可避免后续调试混淆
示例安全写法：box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.12);
为什么加了 box-shadow 却看不见？
最常踩的坑不是代码写错，而是元素本身“没资格投出阴影”：- 元素宽高为
0（比如空<div></div>），没内容也没width/height，阴影无处附着 - 元素是
display: inline（如默认<span>），box-shadow 对纯 inline 元素无效，需改为inline-block或block - 父容器设了
overflow: hidden，把溢出的阴影裁掉了 - 表格用了
border-collapse: collapse，但没配border-radius+overflow: hidden，导致圆角处阴影断裂
检查时先加一句 background: #eee; 看元素是否真有渲染区域，再调阴影。
一行写多重阴影？逗号是唯一分隔符
想用一行 CSS 实现多层阴影（比如近景+远景），只能靠逗号，不能换行、不能加分号、不能用空格替代逗号：- ✅ 正确：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08); - ❌ 错误：
box-shadow: 0 2px 4px rgba(0,0,0,0.1); 0 8px 16px rgba(0,0,0,0.08);（分号终止声明） - ❌ 错误：
box-shadow: 0 2px 4px rgba(0,0,0,0.1) 0 8px 16px rgba(0,0,0,0.08);（空格连成单个值，解析失败）
多层阴影建议控制层级逻辑：第一层偏移小、模糊低（模拟紧贴投影），第二层偏移大、模糊高（模拟环境散射），透明度逐层降低。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
table 元素加阴影要额外注意 border-collapse
直接给<table> 加 box-shadow 是可行的，但若用了 border-collapse: collapse，又没处理圆角，会出现阴影和边框不贴合的问题：
- 必须搭配
border-radius: 8px+overflow: hidden，否则圆角处阴影被截断 - 若想每个
<td>都有独立阴影（非整体投影），就不能用collapse，得切到border-collapse: separate并设置border-spacing，再把box-shadow加到td上 -
th和td默认无背景，记得加background-color，否则阴影在透明底上不明显
最简稳妥方案：table { border-collapse: collapse; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
真正容易被忽略的是：box-shadow 不触发重排，但大量使用（尤其配合 transform: scale() 或高频 hover）可能隐式触发重绘，而 filter: drop-shadow() 在滚动中更容易掉帧——别为了“一行”强行塞进复杂效果，该拆就拆，该换就换。
