边缘不工作的线性渐变CSS遮罩图像

Caniuse.com说Edge完全支持遮罩图像，但是下面的代码在除Edge之外的所有浏览器中都可以使用

width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

这将产生一个简单的红色框，顶部为红色，底部为透明。在Chrome和Firefox中测试，没有问题

---

那么，它只是和线性梯度不相容吗？我浏览了网页，但找不到答案。

根据，

掩码图像在Edge 18中受支持，但在较低版本中隐藏在一个标志后面。
这是我的测试代码

    #masked {
        width: 200px;
        height: 200px;
        background: red;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
<div id="masked"></div>

#蒙面{
宽度：200px；
高度：200px；
背景：红色；
遮罩图像：线性渐变（到底部，rgba（0,0,0,1），rgba（0,0,0,0））；
-webkit遮罩图像：线性渐变（到底部，rgba（0,0,0,1），rgba（0,0,0,0））；
}

我发现，如果我不添加-webkit掩码图像，在Chrome上运行时，底部将没有透明

但它总是在边缘工作得很好

我的版本是Microsoft Edge 44.17763.1.0，Microsoft EdgeHTML 18.17763

啊，谢谢你。我以为我有最新的版本（我从未拒绝过任何更新），但它肯定比我想象的要新。啊，很快就把它标记为正确的答案，对不起。我在Edge 17中设置了标志“CSS掩蔽”，但不幸的是，它仍然不起作用。整个div都是红色的。@jonhobs它似乎不能正常工作。对我来说，当我尝试使用mask-image时，Edge会不断崩溃。是的，开发工具每次都会崩溃，但浏览器仍然可以工作。到我的项目启动时，Edge可能已经正式切换到chromium渲染引擎，但我仍然需要修复它：（你可以用简单的渐变作为背景，而不需要maskThanks@TemaniAfif，但我已经简化了我的用例，在这里发布。实际上，div将包含需要屏蔽的html内容，而不仅仅是纯色。你可以发布真实的用例，我们可能会找到一些解决方法；）谢谢Jenifer。您是如何获得Edge版本18的？我已经完成了Windows 10的每一次升级，但仍然获得了版本17。我的Edge会随着系统的更新而更新。也许您可以转到“系统设置”检查更新。