伪元素边框不会撑大卡片，因为::before或::after默认不参与文档流，设为position: absolute并配合父容器position: relative后，仅作为装饰层覆盖于卡片之上，不影响盒模型尺寸；必须写content: ""且父容器设relative定位，否则伪元素失效或错位。
伪元素边框为什么不会撑大卡片
因为 ::before 或 ::after 默认不参与文档流，只要设成 position: absolute 并配合父容器的 position: relative，它就只是“盖”在卡片上的一层装饰，不影响盒模型尺寸。常见翻车点是忘了加 content: ""，或者没给父容器设定位——结果伪元素跑到 body 里去定位，边框错位甚至消失。
- 必须写
content: ""，否则浏览器直接忽略整个伪元素 - 父容器（如
.card）必须有position: relative，哪怕只写这一行 - 伪元素用
top: 0; right: 0; bottom: 0; left: 0比width: 100%; height: 100%更稳，能绕过某些浏览器对百分比高度的计算偏差 - 加
pointer-events: none防止遮挡卡片内的按钮、链接等可点击内容
怎么让边框看起来是“包住”卡片而不是“画在上面”
关键在于伪元素尺寸和层级控制：让它略大于卡片本体，再用 z-index: -1 垫在底下，视觉上就是“外边框”。如果直接等宽等高，边框会和卡片边缘重合，显得像内描边；如果缩得更小，又容易露白底。
- 给伪元素设
width: calc(100% + 4px); height: calc(100% + 4px)，再配top: -2px; left: -2px居中偏移 - 或更稳妥：用
transform: scale(1.02)微放，避免像素对齐问题导致的模糊 - 记得同步设置
border-radius，否则圆角卡片配上直角边框会明显割裂 - 如果卡片本身有
overflow: hidden，伪元素可能被裁掉——这时得把overflow移到更外层容器上
hover时加阴影+边框动画，为什么transition不生效
最常踩的坑是初始态用了 border: none。CSS 的 transition 对 none → solid 这种类型切换不支持平滑过渡，必须用可插值的值，比如 border-color: transparent。
- 初始边框写成
border: 2px solid transparent，不是none - 只过渡具体属性：
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s，别用all（尤其在移动端易卡） - hover 时改
border-color和box-shadow，再加transform: scale(1.015)模拟浮起感 - 真机高分屏上边缘易闪烁？加
will-change: border-color, box-shadow, transform，但仅对频繁交互的卡片启用，别滥用
多重边框或倒圆角这类进阶效果怎么组织伪元素
一个伪元素只能画一层边框，要多层就得叠两个：::before 画外层（稍大、z-index 低），::after 画内层（稍小、z-index 高）。倒圆角本质是用伪元素遮住卡片一角再加阴影模拟“内凹”，不是真的反转 border-radius。
- 外层边框用
::before，z-index: 1，尺寸calc(100% + 6px) - 内层边框用
::after，z-index: 2，尺寸calc(100% - 4px)，top: 2px; left: 2px - 倒圆角效果：伪元素设
border-radius: 0 12px 0 0，再叠加box-shadow: 8px -8px 12px rgba(0,0,0,0.1)模拟光影落差 - 所有伪元素都必须显式声明
content: ""和position: absolute，少一条都可能白写
实际写的时候，最容易被忽略的是 content: "" 和父容器的 position: relative ——它们不报错，但一漏就全失效，而且很难一眼看出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
