你提到的Reveal Focus是微软Fluent Design体系里的经典交互效果，原本的效果长这样：

但正如官方文档里说的：

Reveal focus会增大焦点视觉元素尺寸，可能引发UI布局问题，部分场景需自定义效果适配应用。

看了你的组件结构和代码，你想用box-shadow做光晕、outline做主焦点、border做次焦点，但遇到了布局偏移的问题，想要达到下面这个流畅的无布局影响效果：

我来帮你梳理下问题和解决方案：

核心问题分析 #

你当前的代码里，虽然outline和box-shadow本身不占据布局空间，但有两个小细节导致了体验上的布局问题：

1. 初始状态没有给outline和box-shadow设置透明占位，导致:focus时这些元素突然出现，引发视觉跳动；
2. inline-block类型的.tile元素之间默认存在空格间隙，看起来像是布局偏移。

解决方案：完全无布局影响的实现 #

要确保所有焦点视觉变化都不修改元素的盒模型尺寸，同时消除不必要的间隙，调整后的代码如下：

body { 
  background-color: #000; 
  padding: 5px 100px;
  font-size: 0; /* 彻底消除inline-block元素间的默认空格间隙 */
} 

.tile { 
  display: inline-block; 
  height: 82px; 
  background-color: #555555; 
  margin: 0; /* 确保没有额外外边距干扰 */
} 

.x1 { width: 19%; } 
.x2 { width: 38%; } 

.reveal-focus {
  /* 用透明样式占位，避免:focus时的尺寸跳动 */
  outline: 2px solid transparent;
  box-shadow: 0 0 0 0 transparent;
  border: 1px solid transparent; /* 次焦点的透明占位 */
  transition: all 0.2s ease; /* 添加平滑过渡，贴近Fluent Design的流畅感 */
} 

.reveal-focus:focus {
  outline-color: #61B250; /* 主焦点高亮线 */
  border-color: rgba(97, 178, 80, 0.5); /* 次焦点淡色边框（可选） */
  box-shadow: 0 0 15px 3px #61B250; /* 外层光晕效果 */
  outline-offset: 0; /* 确保焦点线紧贴元素边缘，不偏移 */
}

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

关键调整点说明 #

• 无布局跳动：初始状态给outline、box-shadow、border都设置透明占位，这样:focus时只是修改颜色和阴影参数，完全不会改变元素的盒模型尺寸，也就不会影响周围布局；
• 消除inline-block间隙：给body设置font-size: 0，解决inline-block元素之间默认的空格间隙问题，让tile紧密排列，和目标效果一致；
• 流畅过渡：添加transition属性，让焦点效果的出现/消失更平滑，符合Fluent Design的动态交互要求；
• 灵活的次焦点：如果不需要次焦点的border，直接去掉相关代码即可，不影响核心效果。

这样调整后，就能实现和你目标GIF完全一致的、无布局影响的Reveal Focus效果啦。

内容的提问来源于stack exchange，提问作者wscourge