css边框虚线_如何使用CSS对虚线边框进行动画处理

装饰的边框可以装饰页面上的任何元素，但是CSS边框在样式方面受到限制。 开发人员经常想出解决方案，例如CSS渐变边框 ， SVG边框 ， 多个边框等 ，以模仿和升级盒子边框及其动画的外观。

今天，我们将研究虚线边框的一种更简单的破解方法：虚线动画。 动画虚线边框将仅使用outline和box-shadow创建，而无需担心后备问题，因为IE8及更高版本支持outline 。 这样，与使用SVG或渐变时不同，用户仍将能够看到边界。 这样您还可以创建双色破折号。 让我们来看看。

创造边界

我们将首先创建边界。 为此，我们将使用虚线轮廓和框阴影。

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    ...
 }

outline将需要其所有值； 宽度，类型和颜色。 box-shadow只