如何在HTML中给input标签设置圆角和阴影效果-html教程-PHP中文网

用 border-radius 实现 input 圆角，需配合 border 和 outline: none；box-shadow 添加阴影，避免 text-shadow；注意 iOS Safari 兼容性及 IE9 透明度降级。

如何在html中给input标签设置圆角和阴影效果

给 `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 DHTML 页面生成器

生成可在 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，直接塞进或 CSS 文件就能用。真正麻烦的从来不是写法，而是忘记重置 outline 或忽略 iOS 的默认 appearance。