纯粹的CSS和布局友好从Fluent设计系统中揭示焦点

Question

在Reveal focus docs其中：

但是，作为文档

  

显示焦点会增加焦点视觉的大小，这可能会导致UI布局出现问题。在某些情况下，您需要自定义“显露”焦点效果，以便针对您的应用进行优化。

您将如何以上述方式创建不影响UI的效果？

My Reveal焦点组件：

1. 显示发光为box-shadow
2. 主要焦点视觉为outline
3. 次要焦点视觉为border
4. 背景

但有些事情似乎已经消失，我无法理解它。它是box-shadow，是间距（如margin，我没有设置任何你可以看到的），还是它还有其他东西？如果你想让它看起来像下面的gif，你会怎么解决？

body {
  background-color: #000;
  padding: 5px 100px;
}
.tile {
  display: inline-block;
  height: 82px;
  background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }

.reveal-focus {
  border: 1px solid transparent;
  outline: 2px solid transparent;
}

.reveal-focus:focus {
  outline-color: #61B250;
  box-shadow: 0 0 15px 3px #61B250;
}

<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>

Answer 1

阴影位于聚焦之前出现的元素上方，但位于其后的元素之下。您需要将position: relative添加到所有元素，将z-index: 1添加到焦点元素。

要确保这不会干扰任何其他堆叠，请将position: relative; z-index: 0应用于容器。这可以确保它有自己的堆叠上下文。

你展示的GIF似乎也有轻微的动画效果，在褪色到正常之前，光晕会更加强烈。这可以通过animation非常简单地实现。

body {
  background-color: #000;
  padding: 5px 100px;
}
.tile {
  display: inline-block;
  height: 82px;
  background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }

.reveal-focus {
  border: 1px solid transparent;
  outline: 2px solid transparent;
  position: relative;
}

.reveal-focus:focus {
  border-color: #000;
  outline-color: #61B250;
  box-shadow: 0 0 15px 3px #61B250;
  animation: glowfade 0.4s linear;
  z-index: 1;
}

@keyframes glowfade {
  from {box-shadow: 0 0 30px 6px #61B250;}
  to {box-shadow: 0 0 15px 3px #61B250;}
}

<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>

根据需要调整值。