box-shadow 从边框外绘制，padding 影响内容与阴影的视觉距离。设置足够 padding 避免拥挤，配合 box-sizing: border-box 和 overflow: visible 防止裁剪，实现立体卡片效果。
当使用 box-shadow 和 padding 结合时，关键是要理解阴影的绘制位置与盒子模型的关系。默认情况下，box-shadow 会根据元素的边框（border）或内容区域（取决于 box-sizing）来绘制，而 padding 是内容与边框之间的空白区域。合理设置可以避免视觉上的拥挤或阴影被遮挡。
box-shadow 基本语法
box-shadow 属性格式如下：
例如：
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);padding 对阴影的影响
添加 padding 不会直接影响阴影的位置，但会影响内容与阴影之间的视觉距离。如果 padding 太小，内容可能显得紧贴边框，阴影也容易让整体看起来压抑。
立即学习“前端免费学习笔记（深入）”；
建议做法：
- 给元素设置适当的 padding，让内容与边框之间有呼吸空间
- 阴影通常从 border 外侧开始绘制，所以 padding 越大，内容离阴影就越远
- 若需要阴影“包裹感”更强，可配合增加扩散半径（spread radius）
避免阴影被裁剪：检查 overflow 和 box-sizing
有时设置了较大的模糊或扩散值，但阴影“消失”，可能是父容器 overflow: hidden 导致的裁剪。确保容器足够大或设置 overflow: visible。
同时推荐设置：
box-sizing: border-box;这样 padding 不会增加元素总宽高，布局更可控。
实用示例
一个带有内边距和柔和阴影的卡片：
.card {padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-sizing: border-box;
}
这个例子中，padding 让文字不贴边，阴影在外部自然延展，整体更立体。
基本上就这些。只要注意 padding 提供内部空间，box-shadow 控制外部层次，两者配合好就能做出干净的卡片、按钮等效果。
