CSS可以做到这一点，并且在使用多个背景并使用动画更改其位置时非常简单。
.border { height: 100px; width: 200px; background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px; background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px; padding: 10px; transition: background-position 2s;}.border:hover{ background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div >Some text</div>这是一个页面加载后边框连续不断移动的示例。
.border { height: 100px; width: 200px; background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px; background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px; padding: 10px; animation: border-dance 4s infinite linear;}@keyframes border-dance { 0% { background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px; } 100% { background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div >Some text</div>归功于web-tiki，它有助于修复最初在动画每个循环结束时出现的轻微失真。
