装饰的边框可以装饰页面上的任何元素，但是CSS边框在样式方面受到限制。 开发人员经常想出解决方案，例如CSS渐变边框 ， SVG边框 ， 多个边框等 ，以模仿和升级盒子边框及其动画的外观。
今天，我们将研究虚线边框的一种更简单的破解方法：虚线动画。 动画虚线边框将仅使用outline和box-shadow创建，而无需担心后备问题，因为IE8及更高版本支持outline 。 这样，与使用SVG或渐变时不同，用户仍将能够看到边界。 这样您还可以创建双色破折号。 让我们来看看。
创造边界我们将首先创建边界。 为此，我们将使用虚线轮廓和框阴影。
.banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; ... }
outline将需要其所有值； 宽度，类型和颜色。 box-shadow只需要扩散的值，该值应与轮廓的宽度和颜色相同。 轮廓线和框阴影线都将产生双色虚线的效果。
然后，您可以调整框的宽度或高度，以使所需的边框看起来在角落。
动画边框对于我们的第一个动画示例，我们将CSS关键帧动画添加到一组横幅，这些横幅的边框连续动画，以引起关注。 对于动画效果，我们将只交换轮廓和框阴影的颜色。
@keyframes animateBorder { to { outline-color: #EA3556; box-shadow: 0 0 0 6px yellow; }}您可以使用outline-color longhand属性指定outline-color ，但是对于框阴影，您现在必须将所有值都赋予shorthand属性。
动画准备好后，将其添加到框中。
.banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; animation: 1s animateBorder infinite; ...}跨境过渡
对于过渡示例，我们将为图片添加边框，并对悬停时的边框进行动画处理。 您还可以更改边框大小以获得不同的效果。
.photos{ outline: 20px dashed #006DB5; box-shadow: 0px 0px 0px 20px #3CFDD3; transition: all 1s; ...}.photos:hover{ outline-color: #3CFDD3; box-shadow: 0 0 0 20px #006DB5;}现在，将鼠标悬停在这些图像上，即可看到CSS虚线边框的所有动画效果。
而且，这是一个包装。 您可以尝试将虚线边框替换为虚线边框，但效果可能不尽如人意。 您还可以在动画制作过程中更改轮廓类型以获得更多效果。
翻译自: https://www.hongkiat.com/blog/css-animated-dashed-border/