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

【问题标题】：styling the outline border with outer overflow set to hidden将外部溢出设置为隐藏的轮廓边框样式
【发布时间】：2021-04-12 16:36:35
【问题描述】：

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">

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

*CSS-HTML 代码请。没有JS

【问题讨论】：

为什么不用border 而不是outline
您可以将outline-offset: -10px 用于.inner:focus
fcalderan，请将其发布为答案 :)
outline-offset 在 IE（或 Edge）中不起作用

标签： html css

【解决方案1】：

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

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

该值应等于outline-width。

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

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

【讨论】：

outline-offset 不适用于 IE（对于那些仍然坚持必须支持它的人）
这是一个很难修复的错误，感谢您的解决方案！

【解决方案2】：

你可以使用::after属性

.inner:focus::after {
    content: "";
    height: 90%;
    outline: 10px solid #ffff00;
    position: absolute;
    top: 10px;
    width: 98.1%;
    z-index: 99999;
}

【讨论】：

非常感谢，我没想到这一点......你很聪明，但我认为 fcalderan 提出了一个更简单有效的解决方案

【解决方案3】：

您可以使用border 代替outline 并设置box-sizing: border-box

.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;
  box-sizing: border-box;
  background-color: #F0F;
  left: 50%;
}
.inner:focus {
  border: 10px solid #FFFF00;
}

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

【讨论】：

谢谢。我不知道box-sizing: border-box;。非常好的解决方案

【解决方案4】：

您可以使用box-shadow: inset 或outline 与否定outline-offset

.inner:focus::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* #1 */
  box-shadow: inset 0 0 0 4px blue;

  /* #2 */
  outline: 4px;
  outline-offset: -4px;
}

【讨论】：