焦点轮廓不显示在Firefox中具有掩码图像CSS规则的div上

我的代码中有几个div应用了

mask image

和

-webkit mask image

css规则。这些div用作UI滑块元素，因此我希望键盘用户能够在它们之间进行制表，并使用箭头键增加或减少它们

这在Chrome中似乎很好，但我注意到在Firefox中，当元素通过tab按钮聚焦时，掩码图像规则似乎覆盖了在元素周围创建轮廓的默认行为

以下是情况的简化：

.masked{
遮罩图像：线性渐变（rgba（0,0,1），透明）；
-webkit遮罩图像：线性渐变（rgba（0,0,0,1），透明）；
}

我只是一个普通的潜水艇！
我有一个掩码图像css规则。
我只是一个普通的潜水艇！

这可能就是FF实现它的方式，要解决它，只需包装您的屏蔽项并将tabindex放在父项上，这样屏蔽就不会屏蔽父项我有一个屏蔽图像css规则适用于我的mac FF

---

–Huangism 8月15日19:21

这可能就是FF实现它的方式，要解决它，只需包装你的蒙版项，并将tabindex放在父项上，这样蒙版就不会蒙版父项我有一个蒙版图像css规则适用于我的mac FF

---

–Huangism 8月15日19:21

在小提琴中，当点击/聚焦时，是否应该有一个蒙面师的轮廓？哦，nvm，chrome上有一个轮廓，但与其他浏览器相比，它非常薄，特别是当你按tab键时（我在divs上有tabindex=0）。正如你在chrome中看到的，mask imaged div的轮廓受mask image规则的影响，但在Firefox中它似乎根本没有显示出来这可能是FF实现它的方式，为了解决这个问题，只需包装你的mask项并将tabindex放在父项上，这样mask就不会屏蔽父项

我有一个mask image css规则

在我的mac电脑上运行非常好，谢谢@Huangism，我想我只是太懒了！考虑到Chrome的默认轮廓更厚，而且这个遮罩几乎看不见，我决定不把它作为一个针对Firefox的bug进行归档。在fiddle中，当点击/聚焦时，遮罩的div应该有一个轮廓吗？哦，nvm，chrome上有一个轮廓，但与其他浏览器相比，它非常薄，特别是当你按tab键时（我在divs上有tabindex=0）。正如你在chrome中看到的，mask imaged div的轮廓受mask image规则的影响，但在Firefox中它似乎根本没有显示出来这可能是FF实现它的方式，为了解决这个问题，只需包装你的mask项并将tabindex放在父项上，这样mask就不会屏蔽父项

我有一个mask image css规则

在我的mac电脑上运行非常好，谢谢@Huangism，我想我只是太懒了！考虑到在Chrome中，默认轮廓更厚，并且这个面具几乎看不见，我决定不把它作为一个针对Firefox的bug进行归档。