html - 仅 CSS 且布局友好 从 Fluent Design System 中显示焦点

Question

在Reveal 焦点文档中：

但是，作为文档

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

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

我的 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>

标签： htmlcssfluent-design

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>

根据需要调整值。