box-shadow 比 border 更适合选中态因其不改变盒模型、不触发布局重排，且自然适配 border-radius；应结合 :checked 和 :focus-visible 精准控制状态，避免 hover 误用，并注意 z-index、overflow 及深色模式适配。
box-shadow 模拟边框为什么比 border 更适合选中态
因为 border 会改变元素尺寸，触发布局重排（reflow），而 box-shadow 是纯绘制层效果，不影响盒模型。尤其在卡片网格、列表项等需要保持对齐的场景下，用 border 一加一减容易错位。
- 选中态常伴随交互反馈（如点击、键盘焦点），需保证视觉变化不引起抖动
-
box-shadow: 0 0 0 2px #007bff这种写法本质是“无模糊、无偏移”的描边，视觉上就是实线边框 - 若同时存在
border-radius，box-shadow会自然跟随圆角，border则可能因渲染差异出现锯齿或断点
如何用 :focus-visible 和 :checked 精准控制选中态
别只靠 :hover 或 :active——它们无法持久保留状态。真实场景里，“选中”往往意味着用户明确做了选择（比如单选卡片、多选列表），得靠语义化状态钩子。
-
:checked适用于带或的卡片封装结构 -
:focus-visible负责键盘导航时的焦点高亮，避免鼠标操作时意外触发（Chrome/Firefox 支持良好，Safari 需加outline: none配合） - 不要直接写
div:hover { box-shadow: ... }—— 这会让鼠标划过就高亮，不是“选中”
阴影层级和 z-index 冲突导致高亮被遮挡
卡片常嵌套在 overflow: hidden 容器或有 z-index 分层的布局中。box-shadow 默认绘制在元素自身堆叠上下文内，一旦父容器裁剪或兄弟元素层级更高，阴影就会消失。
- 给卡片加
position: relative和足够高的z-index（比如z-index: 2） - 确保父容器没有
overflow: hidden，或改用overflow: clip（更现代，对阴影更友好） - 阴影扩散值（第四个参数）别设太大，比如
box-shadow: 0 0 0 4px #007bff在小卡片上容易被截断，2px 更稳妥
深色模式下 box-shadow 颜色怎么不硬编码
写死 #007bff 会导致深色模式下蓝边糊成一片。应该用系统色或者 CSS 自定义属性动态响应。
- 优先用
color-scheme: light dark配合CSS @media (prefers-color-scheme: dark) - 更灵活的做法：定义
--card-selected-shadow: 0 0 0 2px var(--primary-color)，再通过 JS 或 class 切换--primary-color - 注意：不要依赖
currentColor，它取的是文字颜色，和边框语义无关
实际项目里最容易漏的是 :focus-visible 的降级处理——没加 outline: none 又没覆盖 box-shadow，结果键盘聚焦时出现双轮廓。这事得在基础卡片样式里就写死：&:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-color); }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
