在HTML5页面开发中，浏览器会给部分原生元素如<input>、<button>、<textarea>以及带controls属性的<video>注入默认边框和外观样式。这些样式来自各浏览器的内置UA样式表，并不是开发者显式书写的，但在视觉合成时会造成意外描边。要彻底取消它们，需要理解UA样式的作用层级并用CSS覆盖。
为什么HTML5元素会有默认边框
每个浏览器都内置了一份UA（User Agent）样式表，用来保证没有外部CSS的网页也能基本可读。对于表单控件，UA样式通常会写上border、background甚至appearance。例如Chrome给文本输入框设定了浅灰色实线边框，Firefox则附带了内阴影。这些声明优先级很低，但如果不主动覆盖，就会一直显示。
另外，当用户通过键盘聚焦控件时，浏览器还会画出outline轮廓线，它和border不同，不会被border:none消除。很多初学者只写了border:none却发现聚焦时仍有蓝框，就是漏掉了outline。HTML5并没有改变UA样式的基本机制，只是新增了更多控件类型，覆盖思路是一致的。
单元素取消默认边框的写法
最直接的方式是针对具体标签重置边框。下面这段代码把输入框和按钮的边框、轮廓全部去掉，并顺手清掉内阴影，避免某些浏览器用box-shadow模拟立体感。
/* 取消单个元素的默认边框 */
input,
button,
textarea,
select {
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
box-shadow: none;
}
其中appearance:none是关键，它能关掉浏览器为控件绘制的原生外观，否则在iOS或旧版Android上，即使border没了，控件仍保留系统风格的边框底色。加上background:transparent可防止底色形成视觉边界。
这种写法的优点是精准、影响范围小；缺点是如果页面后来加了新控件类型，容易漏写。在大型项目里，更推荐统一的重置策略。
使用CSS重置方案批量处理
在样式文件最前面放入一段reset规则，可以让所有HTML5元素从零开始，开发者再按需添加设计。下面是一段轻量重置示例，用通配符消除边距和边框相关属性。
/* 简易HTML5边框重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input,
button,
textarea,
select,
video,
audio {
border: 0;
outline: 0;
appearance: none;
-webkit-appearance: none;
}
/* 聚焦时也去掉轮廓，如需要可自定义 */
:focus {
outline: none;
}
这段规则把border设为0而非none，在多数渲染引擎里效果等价，且书写更短。注意:focus全局去轮廓会降低无障碍访问性，生产环境建议改成自定义焦点样式，例如用box-shadow模拟细线。
如果团队不想自己维护重置代码，也可以引入成熟的normalize.css，它不会粗暴删除边框，而是把各浏览器差异拉平，再由你决定是否设border:none，这种方式更平衡。
常见误区与兼容要点
一个典型误区是认为写了border:0就万事大吉，结果在iPhone上<input type="search">依然有圆角边框。这是因为 Safari 对该类型强制使用了appearance，必须显式写-webkit-appearance:none才能剥离。另一个误区是在CSS里用HTML标签字符串如<input>当选择器却忘记它是元素名，正确写法是直接写input而不是带尖括号。
下表列出了几个易留边框的场景与处理属性：
| 元素或状态 | 残留样式来源 | 对应CSS属性 |
|---|---|---|
| 文本框聚焦 | 浏览器outline | outline:none |
| 搜索框iOS | appearance | -webkit-appearance:none |
| 视频控件 | UA边框与背景 | border:0;background:transparent |
总之，取消HTML5默认边框的核心就是覆盖UA样式并处理好appearance与outline。先用重置规则打底，再针对设计补充边框，页面就能完全受控。