如何用CSS实现价格卡片的推荐高亮样式？

推荐卡片需两层边框：内层2px实线#ff6b35强化轮廓，外层阴影0 4px 12px -2px rgba(255,107,53,0.2)营造浮起感；价格加粗放大、原价删线灰字、右上角固定8px间距小角标；hover仅增强阴影与价格微上移；响应式下角标用px定尺寸、价格区设min-width、小屏减边框与阴影强度。

推荐卡片的边框和阴影怎么加才不显廉价？

直接用 box-shadow: 0 0 0 3px #ff6b35 容易发虚、边缘糊，尤其在高 DPI 屏幕上。真正干净的「推荐」高亮，得靠两层边框：内层实线强调轮廓，外层柔和阴影营造浮起感。

1. 第一层用 border: 2px solid #ff6b35，确保视觉重量足够
2. 第二层用 box-shadow: 0 4px 12px -2px rgba(255, 107, 53, 0.2)，负的水平/垂直偏移能压住阴影扩散感
3. 避免同时设 border-radius 和大模糊值阴影——圆角会吃掉阴影细节，建议统一用 border-radius: 8px 配合中等阴影

价格数字的「推荐感」靠什么强化？

光加个「推荐」标签不够，用户扫一眼要立刻识别出这是优选项。关键在价格本身的视觉权重和对比逻辑。

1. 主价格用 font-weight: 700 + font-size: 1.5rem，比普通卡片大 20%，但别超过 1.8rem（否则移动端溢出）
2. 原价用 text-decoration: line-through + color: #999，注意别用 opacity: 0.6——它会让文字发灰，削弱可读性
3. 加一个微小的角标，比如绝对定位的 .badge-recommended，内容为「推荐」，背景 #ff6b35，文字白色，font-size: 0.7rem，右上角留 8px 间距

hover 状态该动哪里？别碰边框颜色

很多实现一 hover 就改边框色或阴影强度，结果鼠标移入像触发了错误状态。推荐卡片的交互反馈要克制，只增强已有特征。

1. 只提升阴影：把 box-shadow 的模糊值从 12px 增到 16px，透明度微升到 0.25
2. 价格数字加轻微上移：用 transform: translateY(-2px)，配合 transition: all 0.2s ease
3. 绝对禁止在 hover 里改 border-color 或 background——这会让推荐标识失去稳定性

响应式下怎么保重点信息不被压缩？

小屏时如果单纯缩放整个卡片，角标可能糊成一块色块，价格数字挤在一起。必须分层控制。

1. 角标用 font-size: 0.6rem（而非 em 或 rem），确保最小尺寸有底线
2. 价格区域设 min-width: 80px，防止数字被强行换行（如「¥199」拆成两行）
3. 在 @media (max-width: 480px) 中，把边框宽度从 2px 改为 1.5px，阴影模糊值减到 8px，避免视觉过重

实际最常被忽略的是角标与右上角的间距一致性——它必须是固定像素值，不能依赖 padding 或 margin 百分比，否则不同尺寸卡片角标位置会漂移。