Html CSS边框图像关键帧动画可以在Firefox中使用，但不能在Chrome中使用

我有一个

div

，带有渐变

边框图像

，还有一个

动画

属性，可以更改关键帧中渐变的

度

这在Firefox中非常有效，但在Chrome中却不行。事实上，在Chrome中，元素根本没有边框。这就像浏览器在看到元素具有
动画
属性时简单地放弃一样

这是一把小提琴：



正文{
背景：黑色；
}
div{
颜色：白色；
宽度：300px；
高度：300px；
边框：5px实心；
边界图像：线性梯度（0度，#ff0000，#00ff00，#0000ff）1/5px；
动画：移动1s无限；
}
@关键帧移动{
0%{边框图像：线性渐变（0deg，#ff0000，#00ff00，#0000ff）1/5px；}
25%{边界图像：线性梯度（90度，#ff0000，#00ff00，#0000ff）1/5px；}
50%{边界图像：线性梯度（180度，#ff0000，#00ff00，#0000ff）1/5px；}
75%{边界图像：线性梯度（270度，#ff0000，#00ff00，#0000ff）1/5px；}
100%{边界图像：线性梯度（360度，#ff0000，#00ff00，#0000ff）1/5px；}
}
这在Firefox中有一个很好的移动边框，但在Chrome中没有
这里有一个使用掩码的想法：


正文{
背景：黑色；
}
.盒子{
颜色：白色；
宽度：300px；
高度：200px；
位置：相对位置；
填充：5px；/*这将控制边框宽度*/
溢出：隐藏；
}
.包厢部{
内容：“；
位置：绝对位置；
插图：0；/*右上下左的简写*/
填充：继承；
/*使渐变仅在填充区域内可见*/
-网络工具包掩码：
线性渐变（#fff 0）内容框，
线性梯度（#fff0）填充框；
-webkit掩码复合：目标输出；
面具组合：排除；
/**/
}
/*旋转梯度层*/
.box div：：之前{
内容：“；
位置：绝对位置；
插图：-50%；
背景：线性梯度（#ff0000，#00ff00，#0000ff）；
动画：移动1s无限；
}
@关键帧移动{
100%{变换：旋转（360度）；}
}

这有一个很好的移动边框
非常感谢您的回复-我应该说我希望避免使用伪元素。我还想知道为什么Chrome不支持这个，而Firefox支持。我将编辑我的原始问题。@WackGet pseudo元素在这里不是强制性的，如果您不想使用它，请在div中添加另一个html元素。您无法设置渐变动画，因此只能使用边框图像无法实现您想要的效果（除非您使用将来的方法，请参阅更新）。在那个之前，你们需要做不同的事情。我的代码片段在Firefox中有动画，但在Chrome中并没有。也许Firefox支持设置渐变动画？您的代码段在Firefox中没有为我设置动画。@WackGet您的代码段没有设置动画，您有一个离散的动画。我的第一个代码片段在Firefox和chrome上进行动画制作，第二个代码片段仅在chrome上进行动画制作，因为我正在使用Firefox上尚不支持的新功能。我明白了，是的，谢谢。那么，为什么离散动画在Firefox上工作，而在Chrome上不工作呢？