优先使用repeat(auto-fit, minmax(280px, 1fr))实现自适应列数，配合max-width: 360px限制卡片宽度、gap替代margin、aspect-ratio+object-fit稳控图片、结构化无障碍提示及transform替代margin实现高性能悬停。
box-shadow 和 border-radius 是卡片视觉成型的底线，但只靠这两个属性搭出来的“收费卡片”在真实项目里基本没法上线——文字错位、按钮跳动、小屏溢出、状态难区分，全是高频翻车点。
怎么用 CSS Grid 控制多版本卡片列数不崩
别写 grid-template-columns: repeat(3, 1fr) 锁死列数，移动端一缩就横向滚动。真正可控的是 repeat(auto-fit, minmax(280px, 1fr))：
-
280px是单卡最小宽度，iPhone SE（375px 屏）下自动退为单列，再小就可能触发max-width: 100%溢出，得额外加overflow-x: hidden -
1fr表示均分剩余空间，但桌面大屏下卡片会无限拉宽，必须配合.card { max-width: 360px; } - 父容器别忘设
gap: 1.25rem，它比margin可靠——不会外边距合并，也不用处理末尾空白
会员等级卡片里图片高度怎么稳住不抖
用户上传图尺寸千差万别，直接 img { height: 120px; } 会导致拉伸或裁剪失控。稳妥方案是双保险：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 现代浏览器：用
aspect-ratio: 4/3+object-fit: cover，图片自动居中裁切 - Safari 15.6 及更早：fallback 用
padding-top: 75%+position: relative包裹img，再绝对定位撑满 - 务必写
loading="lazy"，否则首屏加载一堆未视口内图片，CLS（累积布局偏移）直接超标
“已开通”和“未开通”状态怎么防色弱用户漏看
只靠绿色/灰色区分权限状态，在 iOS 高对比度模式或色觉障碍用户眼里全是灰块。必须叠加结构化提示：
- 已开通：绿色 SVG 对勾图标 +
aria-label="当前等级已享有此项权益"+ 文案写“已启用”（不是“可用”） - 未开通：灰色文字 +
text-decoration: line-through划掉图标 +aria-disabled="true"+ 文案写“升级至高级版解锁” - 禁用纯颜色判断逻辑，比如 JS 里别写
if (el.style.color === 'green')，改用el.hasAttribute('data-enabled')
为什么不能用 margin-top 做悬停上浮动效
很多教程教 .card:hover { margin-top: -4px; }，这在列表超过 20 张时，滚动会明显卡顿：
-
margin触发 layout（重排），而transform: translateY(-4px)走 GPU 合成层，性能差一个数量级 - 必须配
transition: transform 0.2s ease，别写all，否则字体、阴影一起过渡，视觉混乱 - 卡片内部按钮如果也加
:hover，要单独控制transform，避免父子同时动效互相干扰
section[role="region"] 的 aria-labelledby 必须指向真实存在的 id 元素——漏写或拼错，屏幕阅读器就读不出“黄金会员权益”这个上下文，整组卡片对残障用户就等于不存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
