<p>用box-shadow+flex可快速实现响应式分类卡片：box-shadow需设负spread-radius（如-1px）防发虚、控blur-radius≤6px保清晰，配合flex: 0 0 calc(25% - 1rem)、gap和flex-wrap: wrap确保布局稳定，避免overflow: hidden截断阴影。</p>

如何用 CSS 实现带阴影的分类卡片布局

直接用 box-shadow + display: flex 就能快速搭出响应式分类卡片，不需要 JS 或第三方库。关键不是加阴影，而是阴影别糊成一片、卡片别挤变形。

box-shadow 参数怎么调才不发虚、不压字

常见错误是直接写 box-shadow: 0 2px 8px rgba(0,0,0,0.1) —— 在高 DPI 屏或缩放后容易发虚、边缘模糊。真正稳的写法要控制扩散半径和偏移量比例：

• box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1)：负的 blur-radius（即 -1px）能收紧边缘，文字不会被阴影“吃掉”
• 避免 blur-radius 超过 6px，否则在移动端会显得脏，尤其浅色背景上
• 用 rgba(0,0,0,0.08) 替代 0.1，更轻量，多卡片并列时不抢眼

卡片宽度、间距与 flex-wrap 的坑

很多人设了 flex: 1 或固定 width: 25%，结果小屏下卡片塌缩、文字换行错乱。正确做法是用 min-width 锚定最小尺寸：

• 每个卡片外层设 flex: 0 0 calc(25% - 1rem)，再配合 gap: 1rem 控制间距，比靠 margin 更干净
• 必须加 flex-wrap: wrap，否则超出容器宽度时会横向溢出，而不是换行
• 在小屏（@media (max-width: 768px)）里改 flex-basis 为 calc(50% - 0.75rem)，确保最多两列

HTML 结构要不要用 figure 或 article

纯分类入口卡片（比如“前端”“设计”“工具”这种导航类），语义上既不是独立内容也不是图片容器，用 div 最稳妥。强行套 figure 反而会让屏幕阅读器误读为媒体内容。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

如果卡片里含图标 + 标题 + 简短描述（非链接），可考虑 section；但只要带 a 标签跳转，就保持 div + role="link" 即可，简单且兼容性好。

阴影层级容易被父容器 overflow: hidden 截断，检查外层是否无意加了这个样式——这是最常被忽略的渲染失效点。