嘿，这个问题我碰到过不少次！Chrome里点击区块或菜单选项出现的蓝色边框，其实是浏览器默认的焦点轮廓样式——它是为了保障键盘导航用户的可访问性设计的，但确实有时候会和设计风格冲突。给你几个解决方案，按需选择：

• 全局调整（谨慎使用）
  如果想统一移除所有元素的默认焦点边框，可以用CSS重置，但记得要补充自定义焦点样式，避免影响可访问性：

  *:focus {
    outline: none;
    /* 可选：替换成你需要的焦点样式，比如虚线边框 */
    border: 2px dashed #666;
  }
  

  ⚠️ 注意：完全移除outline而不提供替代样式，会让依赖键盘导航的用户无法定位当前焦点，不符合可访问性标准。

• 针对特定元素定制
  比如你代码里的#contact区块，或者菜单选项，可以单独设置它们的焦点样式：

  /* 针对contact区块 */
  #contact:focus {
    outline: none;
    box-shadow: 0 0 4px 2px #your-custom-color;
  }
  /* 针对菜单选项（假设菜单类是.menu-item） */
  .menu-item:focus {
    outline: none;
    border-radius: 4px;
    border: 1px solid #your-custom-color;
  }
  

• 推荐方案：用:focus-visible兼顾体验与可访问性
  这个CSS伪类可以智能区分鼠标点击和键盘导航：只有当用户用键盘（Tab键）导航时才显示焦点样式，鼠标点击时自动隐藏，完美平衡设计需求和可访问性：

  /* 键盘导航时显示自定义焦点样式 */
  *:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
  /* 鼠标点击时移除默认边框 */
  *:focus:not(:focus-visible) {
    outline: none;
  }
  

简单解释下原因：Chrome的默认UA样式表中，给所有:focus状态的元素添加了outline: -webkit-focus-ring-color auto 5px;，这就是你看到的蓝色边框啦。

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