卡片阴影被裁掉主因是父容器 overflow: hidden，因阴影不占文档流；其次为 border-radius 未配 overflow: hidden 致子元素溢出遮挡阴影；Flex 布局应改用 gap 控制间距，避免 margin 与 overflow 冲突；padding 用于内部留白，margin 仅限外部定位；box-shadow 宜用带负 spread-radius 的双层写法，如 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)。
为什么卡片阴影会被裁掉
最常见的原因是父容器设置了 overflow: hidden，而阴影本身不占文档流、也不撑开容器——它只是“画”在元素边缘外的一层视觉效果。一旦父容器裁剪内容，阴影就直接消失。另一个隐性原因：卡片用了 border-radius 却没配 overflow: hidden，导致子元素（比如图片）圆角溢出，间接挤压或遮挡了阴影渲染空间。
Flex容器中用gap代替margin控制卡片间距
别再给每个卡片加 margin-bottom 或 margin-right。这样不仅首尾多出空白，还容易和父容器的 overflow: hidden 冲突，让底部/右侧阴影被切掉。改用 Flex 容器的 gap 属性：
-
display: flex+flex-wrap: wrap的父容器上直接设gap: 16px - 卡片自身保持干净：不设
margin，只管padding和box-shadow - 如果必须兼容老浏览器（如 IE），才退回到
margin+:first-child/:last-child修正
padding和margin分工错误会连带影响阴影显示
新手常把卡片内边距全塞进 margin，结果卡片内容“顶到边框”，视觉上像阴影贴着文字；或者用 padding 控制卡片之间距离，造成外边距塌陷、父容器高度计算异常，最终触发意外的裁剪。正确分工：
-
padding：控制卡片内部呼吸感，例如padding: 1.5rem让标题、图片、文字离边框有余地 -
margin：仅用于非 Flex/Grid 场景下的外部定位，比如卡片与页眉之间的距离 - Flex/Grid 中，卡片间距离统一交给
gap，它不会干扰阴影绘制区域
box-shadow参数写错导致阴影“发虚”或“压字”
阴影不是越模糊越好。写成 box-shadow: 0 0 12px rgba(0,0,0,0.1) 就是典型错误：无偏移+全向模糊，看起来像发光，不是浮起；更糟的是，这种写法会让阴影紧贴文字底部，尤其在小字号时产生压迫感。推荐组合：
- 基础态：
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)（双层，更稳） - 悬停态：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) - 关键点：负的
spread-radius（如-1px）能收紧阴影边缘，避免虚边盖住文字
真正卡住阴影显示的，往往不是 shadow 本身，而是父容器的 overflow、卡片的 box-sizing、以及 gap 和 margin 的混用逻辑。调的时候先关掉所有 overflow: hidden，再一层层加回来，比反复调 shadow 数值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
