设置外溢出设置为隐藏的轮廓边框样式

Question

在CSS样式：

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}

.outer:focus {
  outline: 10px solid #00FF00;
}

.inner {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #F0F;
  left: 50%;
}

.inner:focus {
  outline: 10px solid #FFFF00;
}

该HTML代码：

<div tabindex="0" class="outer">
<div tabindex="0" class="inner">

的问题：我想打内格可聚焦与外框，但因为overflow: hidden;我不能做到这一点。这只是一个例子。另外，overflow: hidden当焦点位于内部 div 时，我不想触摸外部 div 的 ，所以这不会发生。也许有一种简单的方法（只有代码，没有 imgs-graphics）来在可聚焦元素上实现某种边框？

*仅CSS-HTML 代码请。没有JS

Answer 1

outline当 div 聚焦时使用负偏移量，如下所示：

.inner:focus {
   outline-offset: -10px;
}

该值应等于outline-width。

作为替代方法，您也可以使用插图，box-shadow例如

box-shadow: inset 0 0 0 10px #ff0;