直接用box-shadow与border-radius组合即可实现干净有层次的卡片，关键在于偏移、模糊、透明度三者配比；需注意语法顺序、单位不可省略、避免overflow:hidden裁剪阴影，并在深色/浅色背景下分别调整rgba值以保证视觉平衡。
直接用 box-shadow + border-radius 就能做出干净、有层次的卡片，不需要 JS 或额外库。关键不是“有没有阴影”，而是偏移、模糊、透明度三者怎么配比才不突兀。
box-shadow 参数顺序和常见填错点
语法是 box-shadow: h-offset v-offset blur-radius spread-radius color inset，前两个必填，单位不能漏——2px 2px 4px rgba(0,0,0,0.2) 有效，2 2 4 rgba(0,0,0,0.2) 直接失效。
- 水平偏移为正 → 阴影在元素右侧；垂直偏移为正 → 阴影在下方（别记反）
-
blur-radius不能为负，设成负数整条声明会被浏览器忽略 -
spread-radius可正可负：正值让阴影向外扩张，负值会“收紧”边缘，比如-2px能让圆角卡片阴影更贴合轮廓 - 多个阴影用逗号分隔，例如
box-shadow: 0 2px 4px #000, 0 -2px 4px #fff模拟上下立体感
border-radius 和 box-shadow 一起用时的视觉陷阱
两者叠加浏览器会自动让阴影也呈现圆角，但前提是：元素本身没被父容器裁掉。很多阴影“消失”，其实是因为父级加了 overflow: hidden。
- 检查卡片直接父容器是否含
overflow: hidden或overflow: auto—— 有就删或改成visible - 如果卡片用了
position: relative，确保z-index大于同级其他元素，否则悬停时阴影可能被隔壁卡片盖住 - 深色背景上用浅灰阴影（如
rgba(255,255,255,0.1)），浅色背景上避免纯黑，用rgba(0,0,0,0.08)～0.15更安全
:hover 悬停阴影变大的正确调法
别只改模糊值。单纯从 0 4px 8px 拉到 0 0 24px，看起来像“炸开”，不是浮起。要配合偏移微调、扩散收束和颜色透度变化。
- 推荐起始值：
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1) - 悬停目标值：
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15)（注意-2px收束 + 垂直偏移加大） - 必须加
transition: box-shadow 0.2s ease，否则变化生硬 - 想强化“抬升感”，加
transform: translateY(-2px)，比top: -2px性能更好，且不会触发重排
移动端 hover 不生效？别硬扛
iOS/Android 上 :hover 只对可聚焦元素（如 <a></a>、<button></button>）在点击后短暂触发，手指停留不会持续响应。
- 最简 fallback：给卡片加
tabindex="0"，然后写.card:focus-within（需现代 CSS 支持） - 稳妥方案：用 JS 监听
touchstart，动态加 class，例如card--hovered，再在 CSS 里统一写.card:hover, .card--hovered - 别用
@media (hover: hover)判断是否启用 hover 样式——它只表示设备“支持 hover”，不代表当前处于悬停状态
真正难的不是写对那几行 CSS，而是阴影数值和实际背景色、文字对比度之间的平衡。调的时候一定要在真机上看，开发工具里的预览框会骗人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
