如何使用 CSS 制作移动虚线边框？

Question

我在输入文本元素周围显示虚线边框： border: 1px dashed black;

我能否以某种方式定义一个“偏移量”来告诉浏览器从哪里开始边框？

我的目标是定义一个计时器，并改变虚线边框的偏移量（使用java GWT element.setAttribute()），从而模拟出顺时针移动的虚线边框结果。

是否有任何现有的 CSS 边框偏移量？

Answer 1

使用动画 .gif 作为 div 的背景来实现类似的效果，有一个有点复杂的解决方法，您想要“加边框”的任何内容都放置在第二个 div 中，第二个 div 嵌套在第一个 div 中，边距为 1px。

动画 .gif 应该是一个小正方形 (8px x 8px)，带有 3px 宽的对角线从左向右移动（您可以调整大小以调整线条的宽度）。当此图像只有一个像素的宽度或高度可见时，它似乎是一个移动的虚线边框。

Matthew Taylor 在他的博客中详细介绍了这项技术：http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page。