如何隐藏如图所示的Bootstrap导航切换按钮的深红色边框？

可以看到导航切换按钮周围存在深红色边框，撰写自定义样式尝试移除边框未生效，最初使用的无效样式代码如下：

.navbar-toggle {
  border : none;
  outline : none;
}

问题根源排查

• 选择器类名与实际DOM类名不匹配：Bootstrap 4 中导航折叠按钮的官方类名是.navbar-toggler，自定义选择器写为.navbar-toggle，缺失类名末尾的r，无法匹配到页面按钮元素，样式完全不会生效。
• 样式加载顺序错误：页面中自定义style.css的引入顺序在Bootstrap CDN样式之前，按照CSS层叠规则，后加载的Bootstrap内置样式会覆盖自定义规则，即使类名匹配也无法生效。
• 未覆盖按钮聚焦态样式：观察到的深红色边框是按钮触发:focus聚焦状态时的默认轮廓边框，仅修改元素静态状态的border、outline属性，无法覆盖聚焦态的样式规则。
  补充说明：贴出的CSS代码存在语法缺失，全局重置规则没有写开头的*选择器，出现了孤立的margin:0;padding:0;}代码片段，存在语法报错风险。

修复方案

使用如下正确的CSS代码替换原有样式，调整CSS引入顺序，保证自定义样式在Bootstrap样式之后加载：

/* 补全缺失的全局重置规则 */
* {
  margin: 0;
  padding: 0;
}

#navbar {
  position: sticky;
  z-index: 10;
  background-image: linear-gradient(to right ,#9517ba ,#5f1782);
}
.navbar {
  background-image: linear-gradient(to right ,#9517ba ,red);
  padding: 0px;
}
.navbar-brand img {
  height: 50px;
  width: 100px;
}
.navbar-nav li {
  padding: 0 10px;
}
.navbar-nav li a {
  color: white !important;
  text-align: right;
}
.fa-bars {
  color: #fff;
  font-size: 20px !important;
}

/* 核心修复规则 */
.navbar-toggler {
  border: none;
  outline: none;
  /* 覆盖Bootstrap默认的聚焦阴影边框 */
  box-shadow: none;
  padding: 0;
  background: none;
}

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