应使用 box-shadow 而非 filter: drop-shadow()，因其不模糊文字、兼容 transform 动画；阴影须加在表单外层 div 容器上，配合 border-radius 和足够 padding 才显立体。

表单卡片的阴影用 box-shadow 还是 filter？

直接用 box-shadow，别碰 filter: drop-shadow() —— 后者会模糊文字、影响可读性，且对 transform 动画不友好。CSS 阴影必须写在表单容器（比如 <div class="form-card">）上，而不是 <form> 标签本身，否则可能被内部元素的 overflow 或 border 截断。

• box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) 是常用起点：垂直偏移 4px、模糊半径 12px、透明度 0.1
• 如果卡片有圆角，border-radius: 8px 必须和 box-shadow 同时设置，否则阴影边缘会生硬
• 避免写 box-shadow: 0 0 0 1px rgba(0,0,0,0.1) 这类“描边式”阴影——它不是真实阴影，视觉上像加了虚线边框，容易和 border 混淆

HTML 结构怎么组织才不踩坑？

别把 <form> 当最外层容器。阴影需要独立渲染层，所以得包一层 <div>，否则 Safari 下可能出现阴影被裁切、或表单 submit 时阴影跳动的问题。

• 正确结构：

  <div class="form-card"><form>...</form></div></li>
  <li>错误结构：<code><form class="form-card">...</form>

  （某些浏览器对 form 元素的 box-shadow 渲染不一致）
• 如果用了 CSS Grid/Flex 布局，确保 .form-card 的父容器没设 overflow: hidden，否则阴影会被剪掉

移动端阴影太重？调这些值就行

桌面端看着舒服的阴影，在手机小屏上常显得油腻、抢眼。关键不是去掉阴影，而是降低强度和扩散范围。

anything-to-html

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

下载

• 移动端建议用：box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)
• 配合媒体查询：@media (max-width: 768px) { .form-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } }
• 别只改模糊值（第二个数字），垂直偏移（第一个）也要同步减小，否则阴影会“浮”得不自然

为什么加了阴影表单还显得扁平？

阴影只是深度感知的一部分。真正让卡片“立起来”的，是对比：背景色 + 内边距 + 阴影三者协同。纯白背景配浅灰阴影，基本等于没加。

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

• 给 .form-card 加 background-color: #fff（别用 transparent）
• 至少设 padding: 24px，内边距太小会让内容贴边，削弱卡片感
• 如果页面背景是浅灰（如 #f8f9fa），阴影 rgba 的 alpha 值可以提到 0.12～0.15，增强对比

阴影本身很简单，但真正卡住人的，往往是它和 padding、border-radius、父容器 overflow 的组合行为。调的时候盯着真机预览，比看设计稿管用。