input[type="date"]无法直接添加box-shadow是因为浏览器通过Shadow DOM封装原生控件，导致样式穿透受限；必须用包裹容器（display: inline-block）、设背景色、加box-shadow，并通过伪元素或inset阴影增强立体感。
input[type="date"] 本身不支持 box-shadow 直接生效——不是你写错了，是浏览器对原生控件的 Shadow DOM 封装导致样式穿透受限。必须用包裹容器 + 显式 display 控制才能稳定加阴影。
为什么直接给 input[type="date"] 加 box-shadow 没反应？
Chrome、Edge、Safari 都把 input[type="date"] 渲染为内部封装的控件（比如带下拉箭头的复合组件），其真实可渲染区域不响应外部 box-shadow；即使 DevTools 显示样式已应用，computed 值里 box-shadow 往往为空或被忽略。
- 错误写法：
input[type="date"] { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }→ 大概率无效 - 有效前提：必须脱离默认 inline 行内行为，显式设
display: block或inline-block - 移动端尤其明显：iOS Safari 完全屏蔽原生 date 输入框的外阴影，连
filter: drop-shadow()都不认
包裹容器法：稳定添加外阴影的三步操作
用 <div> 包住 <code>input[type="date"]，阴影加在容器上，同时控制尺寸与圆角。
- HTML 结构必须是：
<div class="date-input-wrapper"><input type="date"></div> - CSS 关键三行：
.date-input-wrapper { display: inline-block; border-radius: 6px; overflow: hidden; } - 阴影写在容器上：
.date-input-wrapper { box-shadow: 0 2px 8px rgba(0,0,0,0.12); } - 别忘了给
input自身设width: 100%和border: none，否则内部控件会撑破容器或留白
立体感进阶：双层阴影 + 轻微 inset 模拟按压反馈
单层外阴影只能“浮”，要做出“可点击”的立体按钮感，得叠加一层内阴影模拟凹陷，但注意：inset 不能直接加在 input 上，必须加在容器内部的伪元素或输入框自身背景上。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：用
::after伪元素盖在输入框右半区，模拟日期箭头区域的按压高光 - 关键 CSS：
input[type="date"]::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: rgba(255,255,255,0.4); border-radius: 50%; } - 更稳妥的立体组合：
box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.7);—— 第二项必须作用于有明确background-color的元素，所以仍需包裹容器设背景 - 深色主题下慎用纯白 inset：
rgba(255,255,255,0.7)在#1e1e1e背景上几乎不可见，改用rgba(255,255,255,0.3)更安全
hover 交互与过渡动画怎么加才不卡？
原生 date 输入框 hover 状态不稳定，且部分浏览器不触发 :hover。必须把交互逻辑绑定到包裹容器，并限制动画属性。
- 只过渡
box-shadow和transform，避免触发布局重排：transition: box-shadow 0.2s ease, transform 0.2s ease; - hover 时轻微上移 + 阴影加深：
.date-input-wrapper:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } - 不要对
input本身加transition，它可能在聚焦时和 hover 冲突，造成闪烁 - 移动端无 hover，所以该效果仅作为增强，不能作为功能依赖
真正难的不是写几行 box-shadow，而是理解浏览器如何对待原生表单控件——它们不是普通 div，阴影必须绕过 Shadow DOM 限制，靠容器承载、靠伪元素补位、靠背景色锚定视觉层次。漏掉任意一环，立体感就塌一半。
