CSS如何移除按钮边框？设置border:none属性不生效如何解决

1 核心问题修复 #

你提供的CSS代码存在语法错误：background-color: white属性末尾缺失分号，导致后续的border: none被浏览器判定为非法语法直接忽略，这是最直接的失效原因。
补上分号即可生效，修复后的代码如下：

button {
  font-size: 16px;
  text-transform: uppercase;
  background-color: white;
  border: none;
}

button:hover {
  color: white;
  background-color: black;
}

2 其他常见场景排查 #

如果修复语法后仍有边框，可逐一排查以下情况：

• 移除默认outline：浏览器自带的按钮点击/聚焦态外边框由outline属性控制，可追加outline: none彻底清除这类外边框效果
• 校验样式优先级：通过浏览器开发者工具的元素面板查看当前button元素的border属性是否被更高优先级的规则覆盖，可临时添加!important测试是否为优先级问题（仅用于排查，不建议生产环境直接使用）
• 检查box-shadow设置：部分样式重置代码或UI库会用box-shadow模拟按钮边框，如有对应规则需同步覆盖为box-shadow: none
• 清除border-image配置：如果存在设置border-image的规则，需要同步添加border-image: none才能让border: none完全生效

内容的提问来源于stack exchange，提问作者cypher