Css 为焦点创建浏览器无关或IE备用内部按钮边框？（与无障碍相关）

我工作的两个额外要求：

• 需要反应式/移动友好型

• 还需要与chrome、firefox和opera兼容

  <button class="outline">
  Lol A button
  </button>
  
  button{
    background-color: blue;
    color: white;
    padding: 15px;
  }
  .outline:focus{
    outline: 2px solid white;
    outline-offset: -6px;
  }
  

  
  笑一个按钮
  钮扣{
  背景颜色：蓝色；
  颜色：白色；
  填充：15px；
  }
  .大纲：重点{
  外形：2倍纯白；
  轮廓偏移：-6px；
  }
  

编辑：

如果您通过示例查看第二个链接和选项卡，可能尝试更改box类中的一些内部边界，您将看到此选项非常严格，并且我无法获得与外部边缘有足够间隙的适当偏移内部边界

特别是，2px可能是内边缘和外边缘之间的最小间隙。其预期用途类似于4-6px英寸，因此有一个非常清晰的边框，因此我可以创建一个7.5:1的对比度，以实现聚焦框的高可见性。在我的特定用例中，如果不破坏站点颜色方案，使用外部边框是不可能的，因此这确实是不可取的

我有点怀疑这是否能作为一个通用的解决方案在3+类型的按钮上运行，并且在手机上看起来也不错

---

此外，如果这里的正确答案是“这是不可能的，你需要完全做其他的事情”，只要这是真的就可以了。我没有CSS方面的经验可以肯定。

我从未找到过像我所寻找的那样的解决方案。相反，我最终做了这样一件事：

box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;

基本上，您必须使用框阴影来模拟轮廓，因此我使用了两个与按钮的颜色/外观匹配的框阴影来创建与按钮展开相同的效果。通过将色带夹在按钮和外色带之间，满足可访问性对比度要求。只要内带和按钮的对比度足够不同，外带与按钮或其他高对比度颜色匹配

这并不是我想要的，但不幸的是，在这个问题（旧版IE兼容性）的背景下，没有太多（任何）其他的选择