推荐卡片需两层边框：内层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 屏幕上。真正干净的「推荐」高亮，得靠两层边框：内层实线强调轮廓，外层柔和阴影营造浮起感。
- 第一层用
border: 2px solid #ff6b35，确保视觉重量足够 - 第二层用
box-shadow: 0 4px 12px -2px rgba(255, 107, 53, 0.2)，负的水平/垂直偏移能压住阴影扩散感 - 避免同时设
border-radius和大模糊值阴影——圆角会吃掉阴影细节，建议统一用border-radius: 8px配合中等阴影
价格数字的「推荐感」靠什么强化？
光加个「推荐」标签不够，用户扫一眼要立刻识别出这是优选项。关键在价格本身的视觉权重和对比逻辑。
- 主价格用
font-weight: 700+font-size: 1.5rem，比普通卡片大 20%，但别超过1.8rem（否则移动端溢出） - 原价用
text-decoration: line-through+color: #999，注意别用opacity: 0.6——它会让文字发灰，削弱可读性 - 加一个微小的角标，比如绝对定位的
.badge-recommended，内容为「推荐」，背景#ff6b35，文字白色，font-size: 0.7rem，右上角留 8px 间距
hover 状态该动哪里？别碰边框颜色
很多实现一 hover 就改边框色或阴影强度，结果鼠标移入像触发了错误状态。推荐卡片的交互反馈要克制，只增强已有特征。
- 只提升阴影：把
box-shadow的模糊值从12px增到16px，透明度微升到0.25 - 价格数字加轻微上移：用
transform: translateY(-2px)，配合transition: all 0.2s ease - 绝对禁止在 hover 里改
border-color或background——这会让推荐标识失去稳定性
响应式下怎么保重点信息不被压缩？
小屏时如果单纯缩放整个卡片，角标可能糊成一块色块，价格数字挤在一起。必须分层控制。
- 角标用
font-size: 0.6rem（而非em或rem），确保最小尺寸有底线 - 价格区域设
min-width: 80px，防止数字被强行换行（如「¥199」拆成两行） - 在
@media (max-width: 480px)中，把边框宽度从2px改为1.5px，阴影模糊值减到8px，避免视觉过重
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
