网站按钮出现异常轮廓线，使用outline:none无效求助

如果outline: none;没起作用，大概率是以下几种情况，对应解决方案如下：

• 选择器优先级不足：浏览器默认样式或其他自定义样式的权重更高，覆盖了你的设置。可以用更具体的选择器，或者针对按钮的:focus状态明确设置：

/* 给按钮加类名后，用类选择器+伪类提高权重 */
.btn:focus {
  outline: none;
}

如果临时测试可以用!important（不推荐长期使用，建议优化选择器权重）：

button:focus {
  outline: none !important;
}

• 混淆了outline和box-shadow：有些UI框架或自定义样式会用box-shadow模拟“轮廓”效果，这时候只设置outline: none没用，需要同时清除box-shadow：

button:focus {
  outline: none;
  box-shadow: none;
}

• 浏览器的:focus-visible行为：现代浏览器默认在键盘导航时用:focus-visible伪类显示轮廓，普通点击不触发。如果想保留键盘导航的可访问性，同时去掉点击时的轮廓，推荐用：

button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

这样既解决视觉问题，又不破坏键盘用户的操作体验。

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