响应式阴影错位、裁切或消失的根本原因是盒模型随视口变化而改变，需主动控制容器边界、图层合成与参数缩放；常见诱因包括 overflow: hidden 裁剪、transform 触发图层丢弃、border-radius 与 box-shadow 不贴合、iOS Safari 对 input 的硬性裁切，以及暗色模式下阴影色未适配。
响应式页面里阴影和边框容易错位、裁切或消失，根本原因不是代码写错，而是盒模型行为随视口变化而改变——必须主动控制容器边界、图层合成和参数缩放逻辑。
box-shadow 在媒体查询中为什么突然没了
不是 CSS 被覆盖，而是父容器 overflow: hidden 或 transform 触发了裁剪。尤其当使用 .container 类（如 Bootstrap）时，小屏下它常自带 overflow: hidden，直接把外扩的阴影截掉。
- 检查所有包裹容器是否在
@media (max-width: 768px)里显式重写了overflow，哪怕只是设成visible - 避免对
body或html直接加box-shadow，它们在响应式缩放时盒模型不稳定 - 如果用了
transform: scale()或will-change: transform做动画优化，阴影可能被图层合成策略丢弃；临时加transform: translateZ(0)强制新建图层 - 多层阴影（逗号分隔）在移动端滚动时易卡顿，小屏建议最多保留 2 层，且
blur-radius不超过 12px
图片圆角 + 阴影在不同宽度下变形或发虚
border-radius 是固定像素值，但图片尺寸随 max-width: 100% 缩放，导致阴影模糊半径相对变大，视觉上“脱离轮廓”。更麻烦的是，box-shadow 默认按原始矩形盒投射，不随 border-radius 自动贴合。
- 用
filter: drop-shadow()替代box-shadow可解决圆角贴合问题，但它不支持inset，且 IE 完全不兼容 - 若坚持用
box-shadow，把blur-radius和spread-radius都设为相对单位（如0.25rem），配合font-size在根元素上做媒体查询缩放 - 别给
外层
设overflow: hidden来“兜底”——这会把阴影一起剪掉；真要防溢出，改用clip-path: inset(0)- PNG 图片有透明区域时，即使加了
border-radius: 50%，阴影仍按矩形渲染；此时必须用object-fit: cover+drop-shadow()输入框（
<input>）在 iOS Safari 上阴影被截断iOS Safari 对表单控件有硬性裁切策略，无论你设没设
overflow，只要阴影超出控件默认盒模型边界，就会被静默裁掉。
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 不要试图给
<input>自身加overflow: visible（无效） - 必须用父容器撑开：套一层
<div class="input-wrapper">，并设padding: 1px和overflow: visible - 避免在 wrapper 上设
border-radius后再让 input 溢出——这会让圆角和阴影错位；应把border-radius和box-shadow都加在 wrapper 上 - 如果同时用了
appearance: none自定义样式，记得补margin: 0和line-height: normal，否则默认行高会干扰阴影定位
暗色模式下阴影颜色没变，看着像糊了一块
rgba(0,0,0,0.15)这类值不会随系统偏好自动调整，浅背景上是柔和灰，深背景上就变成一块死黑。- 必须用
@media (prefers-color-scheme: dark)手动覆盖：比如把box-shadow: 0 4px 12px rgba(0,0,0,0.15)改成0 4px 12px rgba(255,255,255,0.08) - 别依赖
currentColor或inherit——阴影色不继承文本色，也不响应 color-scheme 切换 - 如果用了 CSS 变量（如
--shadow-color），需在媒体查询里重新赋值，不能只靠 :root 定义 - 某些框架（如 Tailwind）的预设阴影类（如
shadow-md）默认不支持暗色模式，得手动扩展或替换为自定义类
最常被忽略的是：阴影不是装饰，它是视觉层级的锚点。一旦在某个断点失效，用户会本能觉得“这个模块塌了”，而不是“阴影没了”。所以检查响应式阴影，重点不在“有没有”，而在“是否还在正确位置、保持合理对比度、没被意外裁切”。
- PNG 图片有透明区域时，即使加了
