具有线性渐变的CSS遮罩图像在Edge中不起作用

Question

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中进行了测试，没有任何问题。

那么，它是否仅与线性渐变不兼容？我已经在网上搜寻了，但是找不到答案。

Answer 1

根据Can I Use，{18}支持mask-image，但在较低版本中隐藏在标志后面。

Answer 2

这是我的测试代码。

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

我发现，如果不添加-webkit-mask-image，则在Chrome上运行时，其底部将没有透明层。

但是它在Edge上总是运行良好。

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