用 border-radius 实现 input 圆角，需配合 border 和 outline: none；box-shadow 添加阴影，避免 text-shadow；注意 iOS Safari 兼容性及 IE9 透明度降级。
给 input 加圆角：用 border-radius 最直接
圆角不是靠 class 或 JS，而是纯 CSS 的 border-radius 属性。它接受长度值（如 px）或百分比，数值越大越圆；设为 50% 且宽高相等时会变成圆形输入框（极少用）。
常见错误是只写了 border-radius 却没配 border，导致视觉上“没变化”——其实圆角已生效，只是边框太细或颜色太淡看不出来。
- 推荐写法：
border-radius: 8px;（适配大多数表单，不突兀） - 若 input 有
border: none，记得同时加outline: none避免聚焦时出现默认蓝色环破坏圆角 - 注意：iOS Safari 对
border-radius在某些 type（如type="date"）下支持不稳定，建议测试真机
添加阴影：优先用 box-shadow，别碰 text-shadow
box-shadow 是给整个 input 元素加投影的唯一可靠方式。text-shadow 只影响文字，对 input 的边框或背景无效。
容易踩的坑是把阴影写成 box-shadow: 0 0 5px #000; —— 这种模糊半径过小、无偏移，看起来像重影而非立体感。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 实用组合：
box-shadow: 0 2px 6px rgba(0,0,0,0.1);（轻微下移 + 柔和扩散，真实感强） - 聚焦时增强阴影：
:focus { box-shadow: 0 0 0 3px rgba(0,123,255,0.25); }，配合outline: none更干净 - 阴影层级受
z-index影响小，但若父容器有overflow: hidden，可能裁掉阴影，需检查父级样式
兼容性与性能提醒：别在老浏览器硬扛
border-radius 和 box-shadow 在 IE9+、所有现代浏览器都支持，但 IE9 不支持 rgba() 颜色值中的透明度，用 rgba(0,0,0,0.1) 在 IE9 会 fallback 成黑色实影。
性能上几乎无负担，但若页面有上百个 input 同时加复杂阴影（比如多层 box-shadow: 0 0 10px #000, 0 0 20px #aaa;），滚动时可能轻微卡顿，尤其低端 Android 设备。
- 保守方案：IE9 及以下用户极少，可忽略；必要时用
filter: drop-shadow()做降级（但兼容性更差） - 移动端注意：iOS Safari 默认给
input加内阴影（-webkit-appearance: none;可禁用，再自定义） - 不要用 JS 动态计算圆角或阴影——纯 CSS 更快、更稳定
实际写法示例：一行能复制粘贴的最小可用代码
input {
border-radius: 6px;
border: 1px solid #ddd;
padding: 8px 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
这段代码没用任何框架、没依赖 JS，直接塞进 <style></style> 或 CSS 文件就能用。真正麻烦的从来不是写法，而是忘记重置 outline 或忽略 iOS 的默认 appearance。
