焦点轮廓未显示在 Firefox 中带有遮罩图像 CSS 规则的 div 上

Question

我的代码中有几个div，它们应用了mask-image和-webkit-mask-imagecss规则。这些div 用作 UI 滑块元素，因此我希望键盘用户能够在它们之间切换并使用箭头键来增加或减少它们。

这在 Chrome 中似乎工作正常，但是我注意到在 Firefox 中，当元素使用选项卡按钮聚焦时，遮罩图像规则似乎覆盖了在元素周围创建轮廓的默认行为。

以下是情况的简化：

.masked {
mask-image: linear-gradient(rgba( 0, 0, 1),transparent);
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

<div tabindex=0>
I'm just a normal div! 
</div>
<div class='masked' tabindex=0>
I have a mask image css rule. 
</div>
<div tabindex=0>
I'm just a normal div!  
</div>

我注意到，当将<div>切换为<button>元素时，焦点在 Firefox 中工作正常，但我不确定将按钮元素用于滑块功能是否有意义。任何帮助不胜感激！

Answer 1

这可能是 FF 实现它的方式，要解决它，只需包装您的屏蔽项目并将 tabindex 放在父项上，这样掩码就不会屏蔽父级

– 黄主义 8月15日19：21

Answer 2

我意识到答案有点晚了，但以防万一它对其他人有帮助。

似乎在 Firefox 中，蒙版应用于元素的所有组件，包括因此可能变得隐藏的轮廓(有时可以通过一些掩码瞥见轮廓(。

比公认的答案 - imo - 更干净的解决方案，不涉及通过添加<div>包装器以非语义方式调整 HTML，方法是在::after伪元素(或::before;在许多情况下似乎并不重要(上设置掩码，同时保持主元素的轮廓， 这样：

.masked {
outline: 1px solid blue;
}
.masked::after {
display: block;
width: 100%;
height: 100%;
mask-size: 100%;
content: ' ';
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

这是我用于使用 SVG 图像自定义样式表单小部件的方法。它还具有保留主元素在状态更改时调整其颜色属性的能力(例如，在悬停时更改感知的背景颜色(的额外好处。