在网页开发中，很多HTML元素会自带默认边框样式，比如输入框的实线边框、按钮的默认边框、链接点击后的蓝色轮廓等，这些样式经常和页面整体设计风格冲突，需要通过CSS样式手动清除。不同元素的边框产生原因不同，对应的清除方式也有区别，下面分场景介绍具体的实现方法。
清除普通元素的默认边框
大部分表单元素、按钮的默认边框是通过border属性实现的，直接将该属性设置为none或者0即可清除。以下是常见元素的清除示例：
/* 清除输入框默认边框 */
input {
border: none;
/* 或者写为 border: 0; 效果一致 */
}
/* 清除按钮默认边框 */
button {
border: none;
background: transparent; /* 可选，清除按钮默认背景 */
}
/* 清除所有div的边框（按需使用） */
div.no-border {
border: none;
}
清除点击后的轮廓边框
链接、按钮等元素在被点击或者获得焦点时，会出现一圈蓝色的轮廓边框，这是outline属性控制的，和border不同，它不占据文档流空间，清除时需要单独设置outline属性：
/* 清除所有元素的焦点轮廓 */
*:focus {
outline: none;
}
/* 仅清除按钮的点击轮廓 */
button:focus {
outline: none;
}
/* 清除链接的点击轮廓 */
a:focus {
outline: none;
}
需要注意，完全清除焦点轮廓可能会影响无障碍访问体验，建议仅在特定场景下使用，或者替换为更符合设计风格的自定义轮廓样式。
清除表格的默认边框
HTML表格默认会有单元格之间的分隔边框，需要通过border-collapse和border属性组合清除：
/* 清除表格所有边框 */
table {
border-collapse: collapse; /* 合并边框，避免双边框 */
}
table, th, td {
border: none;
}
/* 如果需要保留表头边框，仅清除单元格边框 */
table.no-cell-border td {
border: none;
}
清除图片链接的边框
低版本IE浏览器中，图片如果被包裹在<a>标签内，会出现默认的蓝色边框，需要通过以下CSS清除：
/* 清除图片链接的默认边框 */
a img {
border: none;
}
不同清除方式的注意事项
border: none和border: 0效果一致，前者语义更明确，后者兼容性略好，现代浏览器中两者无差异。- 清除
outline后，建议为焦点状态添加其他视觉反馈，比如背景色变化，避免键盘导航用户无法感知当前焦点位置。 - 如果元素本身有内联样式设置了
border，CSS样式需要使用!important才能覆盖，例如border: none !important;。 - 清除边框后如果元素背景和页面背景一致，可能会导致元素位置难以辨识，可根据需求调整背景色或添加其他视觉区分样式。
完整示例代码
以下是一个综合清除多种元素边框的完整CSS示例：
/* 全局清除默认边框相关样式 */
* {
box-sizing: border-box;
}
/* 清除表单元素边框 */
input, textarea, select {
border: none;
outline: none;
}
/* 清除按钮边框 */
button {
border: none;
outline: none;
background: transparent;
cursor: pointer;
}
/* 清除链接轮廓 */
a {
outline: none;
text-decoration: none;
}
/* 清除表格边框 */
table {
border-collapse: collapse;
border: none;
}
th, td {
border: none;
}
/* 清除图片链接边框 */
a img {
border: none;
}