如何仅使用CSS实现类似Photoshop选区的流动黑白虚线边框效果

观察到的原生效果 #

使用Photoshop各类选区工具完成内容选中后，选区周围会环绕持续动态流动的黑白虚线描边，静态形态如下：

_ _ _ _ _ _ _ _ _ _
|                   |
|                   |
|                   |
|_ _ _ _ _ _ _ _ _ _|

核心咨询问题 #

• 是否存在纯CSS方式可以完全复刻这种边框样式？
• 是否可以将对应流动效果的参考GIF图作为描边的背景图来实现该效果？

已尝试的实现方案（未达预期） #

• 尝试直接把图片作为边框属性值编写CSS，代码完全无法生效，示例代码如下：

.selected {
  border: 1px solid url("selection.gif");
}

• 尝试在白色实线边框上方叠加黑色虚线边框，但始终无法找到实现线条动态流动、调整线条偏移的方法，效果不符合预期。

明确的效果边界 #

• 现有常见的可流动虚线实现方案存在明显局限：这类方案均为单色样式，虚线之间为空白间隙，视觉排布是「黑虚线→空白间隙→黑虚线→空白间隙」；而需求匹配Photoshop原生选区的无空白间隙排布规则，即「白虚线→黑虚线→白虚线→黑虚线」的连续交替效果，两类效果的视觉差异可参考对应对比示意图。
• 已找到的接近效果的公开示例作品，仍是带间隙的单色版本，无法满足连续黑白交替的视觉要求。

内容的提问来源于stack exchange，提问作者Jordy