box-sizing: border-box 是卡片样式的起点，因不加它时 padding 和 border 会撑大实际宽高导致布局错乱；阴影与圆角需协调数值和透明度；text-overflow 截断需同时满足三个前提；伪元素定位须注意层叠上下文和父级 relative。
为什么 box-sizing: border-box 是卡片样式的起点
不加它，padding 和 border 会撑大卡片实际宽高，导致布局错乱——尤其当你用 width: 300px 却发现最终占满整行时，八成是这个原因。
- 所有卡片元素（
.card、.card-header等）建议统一设为box-sizing: border-box - 现代项目可直接在全局重置：
* { box-sizing: border-box; }，但注意会影响第三方组件样式 - IE8+ 支持，无需前缀；但若需兼容老 IE，得用
-ms-box-sizing（已废弃，仅作了解）
阴影和圆角怎么配才不显脏
box-shadow 和 border-radius 单独用都简单，混搭容易发虚、生硬或边缘漏光。关键在数值节奏和颜色透明度。
-
border-radius推荐用8px或12px，避免4px（太锐）或24px（像药丸） -
box-shadow别只写一层：用0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04)模拟自然光层次 - 深色背景上，把
rgba的 alpha 值调低到0.04–0.06，否则阴影抢主视觉
文字溢出截断在卡片里为什么总失效
卡片常含标题、描述等不定长文本，text-overflow: ellipsis 失效不是语法错，而是缺了三个前提条件。
- 必须同时满足：
white-space: nowrap（单行）、overflow: hidden、width或max-width有明确值 - 多行截断要用
-webkit-line-clamp，但仅限 WebKit 内核，Firefox 需配合display: -webkit-box - 别对
flex容器子项直接设width，优先用flex: 0 1 auto+min-width: 0防止 flex 项不收缩
伪元素装饰卡片时的定位陷阱
用 ::before 加角标、渐变遮罩或装饰线很常见，但一动就偏移、消失或盖不住内容，多半是层叠上下文或尺寸计算出了问题。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有
position: relative，否则absolute伪元素会相对 body 定位 - 伪元素本身要设
content: ""，且不能依赖空格或换行来“占位” - 如果卡片用了
transform（比如 hover 缩放），伪元素可能被裁切——此时需在父级加transform-style: preserve-3d或改用scale()替代transform: scale()
卡片样式真正难的不是堆属性，而是每个属性都在参与盒模型、层叠顺序和渲染管线的隐式博弈。改一个 padding，可能要同步调三处 z-index 和两个 transform 触发条件。
