box-shadow 要清晰自然需控制偏移与模糊比例，避免与 border 冲突；文字不被遮挡需确保无误设 z-index 或 overflow: hidden；padding 管内距、margin 管外距；Flex 中用 flex: 1 0 300px 防缩窄；border-radius 与 shadow 值应协调匹配。
box-shadow 怎么加才不糊、不飘、不压文字
阴影太虚会像没加，太实又像贴图；设了 box-shadow 却发现文字被盖住，或卡片边缘发灰——根本原因是没理清「阴影绘制层叠顺序」和「盒模型边界」。它默认画在元素背景和边框之外，但不会影响文档流，也不会撑开父容器。
- 用
box-shadow: 0 2px 8px rgba(0,0,0,0.1)而不是box-shadow: 0 0 8px #000：后者无偏移+全向模糊，视觉上像“发光”，不是卡片浮起感 - 避免同时设
border和大box-shadow：深色边框 + 灰色阴影容易混成一块，建议去掉border，靠阴影本身定义轮廓 - 如果文字被阴影遮挡，检查是否误加了
z-index或父级overflow: hidden—— 阴影属于该元素的“绘画效果”，不参与 stacking context 分层，但会被裁剪
margin 和 padding 在卡片布局里各管什么
新手常把卡片间距全塞进 padding，结果内容被挤扁，或者用 margin 控制内边距，导致外边距塌陷、对齐错乱。记住：padding 是卡片“内部呼吸感”，margin 是卡片“之间距离”。
- 卡片自身内容（标题、图片、文字）和边框/阴影之间的空隙，用
padding，比如padding: 16px - 相邻卡片之间的空隙，用
margin，比如margin-bottom: 24px；若用 Flex/Grid 布局，优先用gap替代 margin，避免首尾多出空白 - 不要给卡片设
margin: auto试图居中——它只在块级且宽度固定时有效；更稳的方式是父容器设text-align: center或用 Flex
card 容器要不要设 width？flex-shrink 为什么会让卡片缩成一条线
在 Flex 容器里放多个卡片，不设宽却希望等宽排列，结果卡片被压缩到内容宽度，甚至文字换行错乱——问题出在 flex-shrink: 1 默认开启，而卡片子元素没约束尺寸。
- 给卡片加
flex: 1 0 300px：意思是“可伸展、不收缩、基础宽度 300px”，比单纯写width: 300px更适应响应式 - 如果卡片内含图片，记得给
img设max-width: 100%和height: auto，否则会撑破卡片宽度 - 在 Grid 布局中，用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比手动算列数更可靠，也自动处理响应断点
阴影和圆角一起用时 border-radius 多大才自然
border-radius 和 box-shadow 不匹配，会出现“阴影漂浮在圆角外”或“圆角被阴影吃掉一角”的情况。关键不是数值绝对大小，而是两者半径比例要协调。
- 常用组合：
border-radius: 8px+box-shadow: 0 2px 12px rgba(0,0,0,0.08)；若圆角加大到12px，阴影模糊值建议同步加到16px左右 - 避免
border-radius: 50%配小阴影：圆形卡片需要更大扩散半径（如box-shadow: 0 4px 24px rgba(0,0,0,0.12)），否则像贴了个硬币 - 如果用了
overflow: hidden裁剪子元素（比如头像溢出），确保border-radius同时作用于卡片和子元素，否则圆角和阴影对不齐
真正难的不是参数调出来，而是改完一个地方，其他卡片突然不对齐、阴影变浅、文字行高错位——盒模型每个属性都在悄悄联动，动手前先看一眼 computed styles 里的 border-box 模式和实际渲染尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
