如何去除给图片添加a标签后出现的蓝色方框？

这个蓝色方框是浏览器默认给链接内图片添加的边框/焦点样式，以下几种方法可以去除：

• 方法一：通过CSS移除图片边框
  给所有图片或仅链接内的图片设置无边框：

  /* 所有图片生效 */
  img {
    border: none;
  }
  
  /* 仅链接内的图片生效 */
  a img {
    border: none;
  }
  

• 方法二：处理链接的焦点轮廓
  部分浏览器在链接获得焦点时会显示蓝色轮廓，可移除或自定义：

  a:focus {
    outline: none;
    /* 可选：自定义聚焦样式，兼顾无障碍体验 */
    /* box-shadow: 0 0 3px 2px #4285f4; */
  }
  

• 方法三：内联样式快速解决（不推荐）
  直接在img标签内添加样式，适合临时测试：

  <a href="https://www.github.com/example" target="_blank">
     <img src="images/Icons/github.png" alt="Github" style="border: none;">
  </a>
  <a href="https://example.itch.io" target="_blank">
     <img src="images/Icons/itchio.png" alt="Itch.io" style="border: none;">
  </a>
  

推荐使用CSS全局或类选择器的方式，便于统一维护。如果移除默认焦点轮廓，建议自定义聚焦样式，保证键盘导航用户的无障碍体验。

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