CSS 边框图像关键帧 animation 适用于 Firefox 但不适用于 Chrome

Question

我有一个带有渐变border-image的div和一个animation属性，它改变了关键帧中渐变的deg （度数）。

这在 Firefox 中完美运行，但在 Chrome 中却不行。 事实上，在 Chrome 中，元素根本没有边框。 就像浏览器在看到元素具有animation属性时简单地放弃了。

这是一个小提琴：

https://jsfiddle.net/0nymc9ej/2/

 body { background: black; } div { color: white; width: 300px; height: 300px; border: 5px solid; border-image: linear-gradient(0deg, #ff0000, #00ff00, #0000ff) 1 / 5px; animation: move 1s infinite; } @keyframes move { 0% { border-image: linear-gradient(0deg, #ff0000, #00ff00, #0000ff) 1 / 5px; } 25% { border-image: linear-gradient(90deg, #ff0000, #00ff00, #0000ff) 1 / 5px; } 50% { border-image: linear-gradient(180deg, #ff0000, #00ff00, #0000ff) 1 / 5px; } 75% { border-image: linear-gradient(270deg, #ff0000, #00ff00, #0000ff) 1 / 5px; } 100% { border-image: linear-gradient(360deg, #ff0000, #00ff00, #0000ff) 1 / 5px; } }

 <div>This has a nice moving border in Firefox but not in Chrome</div>

1. 为什么这在 Chrome 中不起作用，但在 Firefox 中起作用？
2. 有没有什么方法可以在不使用伪元素、JavaScript 或其他 hacky 方式的情况下在 Chrome 中工作？
3. 由于 animation 现在看起来真的很生涩，有没有办法让渐变变化平滑地“淡入”彼此（无需简单地添加更多关键帧）？

Answer 1

这是一个使用面具的想法：

 body { background: black; }.box { color: white; width: 300px; height: 200px; position:relative; padding:5px; /* this will control the border width */ overflow:hidden; }.box div{ content:""; position:absolute; inset:0; /* shorthand of top right bottom left */ padding: inherit; /* make the gradient visible only inside the padding area */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) padding-box; -webkit-mask-composite:destination-out; mask-composite:exclude; /**/ } /* a rotating gradient layer */.box div::before{ content:""; position:absolute; inset:-50%; background:linear-gradient(#ff0000, #00ff00, #0000ff); animation: move 1s infinite; } @keyframes move { 100% { transform:rotate(360deg); } }

 <div class="box"> <div></div> This has a nice moving border</div>

在不久的将来，您可以使用 CSS 变量来做到这一点，如下所示（目前仅适用于 Chrome 和边缘）

 @property --a{ syntax: '<angle>'; inherits: false; initial-value: 0deg; } body { background: black; } div { color: white; width: 300px; height: 200px; border: 5px solid; --a:0deg; /* fallback for FF to see the border */ border-image: linear-gradient(var(--a), #ff0000, #00ff00, #0000ff) 1 / 5px; animation: move 1s infinite; } @keyframes move { 100%{--a:360deg} }

 <div>This has a nice moving border</div>