改掉边框隐形、间距错乱、行高失控、悬停卡顿四点，视觉质感立刻提升：边框需满足对比度≥4.5:1或用outline；网格间距用gap而非margin；文字行高用无单位值并重置margin；悬停优先用transform位移替代多重box-shadow。
卡片排版单调，根本不是“缺设计感”，而是几个关键细节被默认值吃掉了：边框在白底上隐形、文字行高失控、多卡片间距靠猜、悬停动效堆阴影反而卡顿。改掉这四点，不用换字体或配色，视觉质感立刻提升。
为什么卡片边框看不见？border 必须配 background-color
纯白背景页面里写 border: 1px solid #e0e0e0，人眼几乎分辨不出——浅灰边框和白底的对比度只有 1.3:1，远低于 WCAG 最低要求 4.5:1。这不是你显示器问题，是 CSS 渲染事实。
- 要么把边框加粗到
2px，颜色调深至#d0d0d0以上 - 要么给卡片加明确背景色，比如
background-color: #fff（别省略单位，#ffffff和#fff在部分旧浏览器解析不一致） - 更稳妥的做法是直接用
outline模拟外描边：outline: 1px solid rgba(0,0,0,0.08)，它不占布局空间，且在深色模式下自动适配透明度
flex 卡片网格中垂直间距总不对？别碰 margin
用 display: flex; flex-wrap: wrap 排多张卡片时，如果靠子元素设 margin-bottom 控制行距，会触发外边距合并（margin collapse），第二行卡片顶部直接贴住第一行底部，间隙消失。
- 一律用父容器的
gap: 16px，它专为网格间距设计，不合并、不溢出、不干扰布局流 - 若需兼容 Safari 15.6 及更早版本，改用
grid：display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px - 切忌用
margin模拟gap：既要给父容器加padding避边，又要给卡片加box-sizing: border-box，维护成本翻倍
卡片内文字挤在一起？line-height 和 margin 要分层控制
h3 默认带 margin-top: 1em 和 margin-bottom: 0.5em，但这个“em”是相对于当前字体大小计算的，一旦卡片内用了不同字号（比如标题 18px、描述 14px），行距就全乱了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一重置：
* { margin: 0; } .card h3 { margin: 0 0 8px 0; }（注意单位用px，避免嵌套缩放） - 描述段落用
line-height: 1.5，不是1.5em——后者会继承父级字体大小，前者是无单位倍数，稳定 - 按钮与文字之间留空，用
margin-top: 12px，别依赖<br>
，否则响应式断点一变就错位
悬停效果一加就卡？box-shadow 不是唯一选项
同时 hover 十几张卡片时，每张都触发 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，浏览器要重绘整个图层，低端设备明显掉帧。
- 优先用位移：
transform: translateY(-2px)，GPU 加速，开销极低 - 阴影只保留一层轻量的：
box-shadow: 0 1px 3px rgba(0,0,0,0.08) - 深色模式兼容写法：
box-shadow: 0 1px 3px color-mix(in srgb, currentColor 8%, transparent)，现代浏览器支持，无需媒体查询
真正卡住人的从来不是“怎么加阴影”或“怎么调圆角”，而是没意识到 gap 和 transform 这类属性本身就有性能与语义优势；用错地方的“小技巧”，比不用还糟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
