应使用 box-shadow 而非 filter: drop-shadow()，因其不模糊文字、兼容 transform 动画；阴影须加在表单外层 div 容器上，配合 border-radius 和足够 padding 才显立体。
表单卡片的阴影用 box-shadow 还是 filter？
直接用 box-shadow，别碰 filter: drop-shadow() —— 后者会模糊文字、影响可读性，且对 transform 动画不友好。CSS 阴影必须写在表单容器（比如 <div class="form-card">）上，而不是 <code><form></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></form> 当最外层容器。阴影需要独立渲染层，所以得包一层 <div>，否则 Safari 下可能出现阴影被裁切、或表单 submit 时阴影跳动的问题。
<ul>
<li>正确结构：<pre class="brush:php;toolbar:false;"><div class="form-card"><form>...</form></div></pre>
</li>
<li>错误结构：<code><form class="form-card">...</form>（某些浏览器对 form 元素的 box-shadow 渲染不一致）
.form-card 的父容器没设 overflow: hidden，否则阴影会被剪掉移动端阴影太重？调这些值就行
桌面端看着舒服的阴影，在手机小屏上常显得油腻、抢眼。关键不是去掉阴影，而是降低强度和扩散范围。
- 移动端建议用：
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，增强对比
