为什么 CSS 径向渐变在 Edge 中不起作用？

Question

我从上一个问题的答案中得到了以下对角线扫描线的解决方案：

html {
height:100%;
background:
radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

该解决方案在Chrome和Firefox中完美地再现了所需的效果，但在Edge中没有任何区别。这似乎没有任何意义，因为所有版本的Edge都支持渐变。

为什么Edge没有复制这些渐变？

Answer 1

下面是conic-gradient()的另一个版本，它应该根据以下内容在Edge的最后一个版本上工作：https://caniuse.com/#feat=css-圆锥梯度

html {
height:100%;
/* fallback for firefox */
background:
radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
/**/
background:
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0   0  /3px 3px,
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

你也可以考虑一个小的SVG作为背景，它在任何地方都能很好地工作：

html {
height:100%;
background:
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}