box-shadow被gap裁剪的主因是容器overflow: hidden且阴影超出可视范围，解决方法包括增加spread-radius、容器设padding或overflow: visible、子项单独设阴影并手动处理首尾留白。
gap 设置后 box-shadow 被裁剪怎么办
gap 控制子项间距，box-shadow 渲染在元素边界外，但默认不占布局空间；两者叠加时，若容器设了 overflow: hidden（常见于卡片、弹窗、列表项），阴影容易被 gap 推开的子项“挤到边缘”后直接裁掉。
根本原因不是 gap 本身有问题，而是阴影的 blur-radius 扩散区域超出了容器可视范围。调试时打开 DevTools 的 “Computed” 面板，确认容器是否真有 overflow: hidden，再看阴影实际渲染尺寸。
- 优先加
spread-radius：比如box-shadow: 0 2px 6px 2px rgba(0,0,0,0.1)，用2px把实边撑出来，比单纯加大blur-radius更抗裁剪 - 容器改用
overflow: visible或留出余量：比如卡片加padding: 8px，让阴影有落脚空间 - 避免在 flex/grid 容器上直接设
box-shadow：它会作用在整个容器框，而 gap 子项的阴影应由子项自己控制——更可控、更易响应
gap 和 box-shadow 共存时首尾留白不一致
gap 只管子项之间，不管容器边缘；box-shadow 却从元素边界向外发散。结果就是：两个相邻卡片间是 gap + 两边阴影，而最左/最右卡片只有一侧有阴影，视觉上左右“轻重不均”。
这不是 bug，是设计逻辑天然如此。想视觉平衡，就得手动补足首尾“缺失”的阴影感或留白。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
padding-left和padding-right，值 ≈shadow blur + spread总和（例如padding: 0 12px） - 用伪元素模拟边缘阴影：
&::before { content: ""; position: absolute; left: -12px; top: 0; width: 12px; height: 100%; box-shadow: 12px 0 12px -12px rgba(0,0,0,0.1); } - 放弃容器阴影，改为每个子项单独设
box-shadow，并统一用margin或padding处理首尾——虽然多写一行，但行为可预测
移动端 flex gap + 阴影响应式断点怎么调
gap 值在媒体查询中可直接改，但 box-shadow 的 blur-radius 和 spread-radius 在小屏下容易糊成一片，尤其在高 DPR 屏幕上。别指望一套数值通吃所有设备。
- 用
rem或px写 shadow，别用%（不合法）；小屏优先减blur-radius，保留spread-radius维持结构感 - gap 响应式建议拆开写：
row-gap: 12px; column-gap: 16px;，这样在竖屏切横屏时能独立调整，避免gap: 12px 16px语义模糊 - 深色模式下，box-shadow 颜色必须显式覆盖：
@media (prefers-color-scheme: dark) { .card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); } }，否则浅色阴影在黑底上几乎不可见
gap 不生效却看到空白，其实是 box-shadow 在“冒充”间距
这是最隐蔽的坑：你检查了半天 gap 没生效，最后发现那“间隙”其实是相邻元素的 box-shadow 重叠区域——尤其当两个卡片都设了 box-shadow: 0 4px 12px rgba(0,0,0,0.08)，它们在垂直方向上的模糊区会自然交叠，看起来像有 8px 间距，其实 gap 是 0。
DevTools 里关掉 box-shadow 就立刻露馅。这种“假 gap”会导致响应式错乱、动画跳变、打印样式异常。
- 调试必做：在 Elements 面板里临时取消勾选
box-shadow，确认真实间距来源 - 设计阶段就约定：gap 负责结构间距，box-shadow 只负责层次与浮起感，二者职责不重叠
- 如果非要靠阴影营造呼吸感，改用单侧阴影（如
box-shadow: 0 4px 8px -4px rgba(0,0,0,0.1)）并配合margin-bottom显式控制，别依赖模糊交叠
