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

The CSS style:

.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;
}

The HTML code:

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

The problem: 我想让内部 div 具有轮廓边框，但由于overflow: hidden;我做不到。这只是一个例子。另外，我也不想碰overflow: hidden当焦点位于内部 div 时，它会出现在外部 div 上，所以这不会发生。也许有一种简单的方法（仅代码，没有图像图形）在可聚焦元素上实现某种边框？

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

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

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

该值应等于outline-width.

作为替代方法，您也可以使用插图box-shadow e.g.

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