生产级定价卡片组件：零抖动、全端适配
定价卡片是企业官网、SaaS 系统及产品落地页的核心组件。本文分享一套可直接上线的生产级代码方案，具备无布局抖动、交互丝滑及全端适配特性，所有代码经完整调试，支持直接复用。
PC 端效果展示：
移动端效果：
核心优势
- 零布局抖动：利用 box-shadow 模拟边框，彻底规避重排问题。
- 视觉高级稳定：角标层级隔离，确保 hover 状态下无位移变形。
- 代码轻量化：采用字符替代 SVG，结构简洁，降低维护成本。
- 交互体验丝滑：上浮、缩放与阴影过渡自然流畅。
- 业务扩展性强：原生支持选中态、差异化配色及套餐升级逻辑。
- 全端兼容：基于 Grid 响应式布局，完美适配桌面、平板及手机。
Grid 网格布局实现多终端自适应
方案摒弃了传统的媒体查询硬改宽高方式，依托网格自适应特性实现更稳定的适配效果：
- 桌面端：三列等分布局，均匀展示三套套餐。
- 平板端：自动切换为两列布局，适配中等屏幕。
- 手机端：单列铺满，最大化移动端阅读体验。
完整代码实现
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>套餐定价</title><style>*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui, -apple-system, "Segoe UI", sans-serif;}body{background:#ffffff;padding:48px 16px;}.wrap{max-width:720px;margin:0 auto;}.section-title{text-align:center;margin-bottom:32px;}.section-title h2{font-size:24px;font-weight:700;color:#1f2937;margin-bottom:8px;}.section-title p{font-size:13px;color:#6b7280;max-width:420px;margin:0 auto;line-height:1.55;}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}.card-wrap{position:relative;}.card-ribbon{position:absolute;top:-8px;left:-8px;overflow:hidden;width:64px;height:64px;z-index:10;}.card-ribbon span{position:absolute;display:block;width:110px;padding:3px 0;font-size:11px;font-weight:600;text-align:center;transform:rotate(-45deg);top:14px;left:-26px;}.ribbon-orange{background:#f59e0b;color:#fff;}.ribbon-gray{background:#6b7280;color:#fff;}.ribbon-red{background:#ef4444;color:#fff;}.ribbon-light{background:#ef4444;color:#ffffff;}.card{background:#ffffff;border-radius:8px;padding:28px 18px;border:1px solid #e5e7eb;transition:0.3s ease;display:flex;flex-direction:column;height:100%;color:#1f2937;position:relative;cursor:pointer;opacity:0;transform:translateY(16px);animation:cardFadeIn 0.5s ease forwards;}.card-wrap:nth-child(1) .card{animation-delay:0.1s;}.card-wrap:nth-child(2) .card{animation-delay:0.2s;}.card-wrap:nth-child(3) .card{animation-delay:0.3s;}@keyframes cardFadeIn {to {opacity:1;transform:translateY(0);}}.card:hover{transform: translateY(-4px) scale(1.03);box-shadow:0 10px 14px rgba(0,0,0,0.06), 0 0 0 2px #2563eb;}.card.recommend:hover{transform: translateY(-4px) scale(1.03);box-shadow:0 10px 16px rgba(245,158,11,0.18), 0 0 0 2px #f59e0b;}.card.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.12),0 10px 14px rgba(37,99,235,0.14);}.card.recommend.active{border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,0.14),0 10px 16px rgba(245,158,11,0.16);}.card.recommend{border:1px solid #f59e0b;background:radial-gradient(circle at top,#fff8e6,#fffbf0);box-shadow:0 5px 16px rgba(245,158,11,0.12);z-index:2;}.card-inner-title{font-size:24px;font-weight:850;color:#111827;margin-bottom:12px;}.desc{font-size:14px;color:#6b7280;margin-bottom:14px;line-height:1.4;}.divider{width:100%;height:1px;background:#efefef;margin-bottom:14px;}.price-wrap{margin-bottom:20px;display:flex;flex-direction:row;gap:8px;align-items:baseline;}.price-original{font-size:12px;color:#9ca3af;text-decoration:line-through;}.price-current{font-size:28px;font-weight:800;color:#111827;line-height:1;}.price-current span{font-size:12px;font-weight:400;color:#6b7280;}.feat{flex-grow:1;margin-bottom:22px;}.feat-item{padding:8px 2px;font-size:14px;display:flex;align-items:center;color:#374151;border-radius:4px;transition:0.2s;gap:6px;}.feat-item:hover{background-color:#f7f8fa;}.card.recommend .feat-item:hover{background-color:#fff2d8;}.check-symbol{font-size:14px;font-weight:700;flex-shrink:0;}.normal-check{color:#10b981;}.recommend-check{color:#f59e0b;}.btn{width:100%;padding:10px 8px;border-radius:6px;border:1px solid #2563eb;background:#ffffff;color:#2563eb;font-size:13px;font-weight:600;cursor:pointer;transition:0.25s ease;pointer-events:none;}.btn:hover{background:#2563eb;color:#fff;}.card.recommend .btn{background:#f59e0b;border-color:#f59e0b;color:#fff;}.card.recommend .btn:hover{background:#d97706;}.card-footnote{font-size:10px;color:#888;margin-top:6px;line-height:1.35;}@media(max-width:768px){.wrap{max-width:600px;}.price-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}@media(max-width:480px){.price-grid{grid-template-columns:1fr;gap:18px;}}</style></head><body><div class="wrap"><div class="section-title"><h2>套餐定价</h2><p>限时优惠活动中，根据业务版本选择合适版本，支持平滑升级，满足不同阶段业务需求。</p></div><div class="price-grid"><div class="card-wrap"><div class="card-ribbon"><span class="ribbon-light">仅限新用户</span></div><div class="card"><div class="card-inner-title">普通版</div><div class="desc">适合个人用户与轻量使用场景</div><div class="divider"></div><div class="price-wrap"><div class="price-current">¥199<span>/年</span></div><div class="price-original">¥299/年</div></div><div class="feat"><div class="feat-item"><span class="check-symbol normal-check">✓</span>基础功能 A</div><div class="feat-item"><span class="check-symbol normal-check">✓</span>基础功能 B</div><div class="feat-item"><span class="check-symbol normal-check">✓</span>基础技术支持</div></div><button class="btn">选择套餐</button><div class="card-footnote">* 不含增值服务</div></div></div><div class="card-wrap"><div class="card-ribbon"><span class="ribbon-orange">推荐</span></div><div class="card recommend"><div class="card-inner-title">高级版</div><div class="desc">性价比首选，适合成长型团队</div><div class="divider"></div><div class="price-wrap"><div class="price-current">¥399<span>/年</span></div><div class="price-original">¥599/年</div></div><div class="feat"><div class="feat-item"><span class="check-symbol recommend-check">✓</span>包含普通版全部功能</div><div class="feat-item"><span class="check-symbol recommend-check">✓</span>高级功能 A</div><div class="feat-item"><span class="check-symbol recommend-check">✓</span>高级功能 B</div><div class="feat-item"><span class="check-symbol recommend-check">✓</span>优先技术支持</div></div><button class="btn">立即选购</button><div class="card-footnote">* 不含增值服务</div></div></div><div class="card-wrap"><div class="card"><div class="card-inner-title">企业版</div><div class="desc">适合企业级部署与团队协作</div><div class="divider"></div><div class="price-wrap"><div class="price-current">按需报价</div></div><div class="feat"><div class="feat-item"><span class="check-symbol normal-check">✓</span>全部高级能力</div><div class="feat-item"><span class="check-symbol normal-check">✓</span>团队子账号</div><div class="feat-item"><span class="check-symbol normal-check">✓</span>企业专属客服</div></div><button class="btn">联系咨询</button><div class="card-footnote">* 不含增值服务</div></div></div></div></div></body></html>
技术实现细节解析
使用 box-shadow 模拟外边框
Box-shadow 属于图层渲染，不占用标准文档流空间。修改其粗细或颜色不会改变盒子尺寸，从而实现零重排、零抖动。
层级拆分实现角标固定
将角标（.card-ribbon）提升至外层包裹层（.card-wrap），与卡片平级。外层容器采用固定定位，不参与缩放动画；当卡片 hover 缩放时，角标保持静止，视觉质感显著提升。同时提高 z-index 层级，确保角标始终置顶，不被卡片阴影或边框遮挡。
价格排版重构与视觉层级规范化
采用 Flex 布局配合 baseline 基线对齐，确保大字优惠价与小字原价在垂直方向上工整对齐。
渐进入场动画与选中态高亮
通过 Animation 实现卡片渐入上浮效果，三张卡片依次延迟加载，增强视觉层次感。组件支持点击选中高亮状态，结合外发光阴影，完美满足表单选择及套餐勾选等业务场景。
该定价卡片组件解决了行业内常规实现的诸多细节问题，可直接应用于 SaaS 官网、产品介绍页、付费套餐页及企业展示站等场景，开箱即用，无需二次改造。
#前端 #CSS 实战 #定价卡片 #网页组件 #前端踩坑