本文将为大家详细介绍“CSS实现边框动画的示例”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“CSS实现边框动画的示例”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
css是什么意思
css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
今天看到这样一个界面，非常有意思：
觉得它的风格很独特，尤其是其中一些边框。
嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。
border 属性
谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。
除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset， outset 等样式。除去 none，hidden，看看所有原生支持的 border 的样式：
基础的就这些，如果希望实现一个其他样式的边框，或者给边框加上动画，那就需要配合一些其他属性，或是脑洞大开。OK，一起来看看一些额外的有意思的边框。
边框长度变化
先来个比较简单的，实现一个类似这样的边框效果：
这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框，下、右边框，通过 hover 时改变两个伪元素的高宽即可。非常好理解。
div {position: relative;border: 1px solid #03A9F3;&::before,&::after {content: "";position: absolute;width: 20px;height: 20px;}&::before {top: -5px;left: -5px;border-top: 1px solid var(--borderColor);border-left: 1px solid var(--borderColor);}&::after {right: -5px;bottom: -5px;border-bottom: 1px solid var(--borderColor);border-right: 1px solid var(--borderColor);}&:hover::before,&:hover::after {width: calc(100% + 9px);height: calc(100% + 9px);}}复制代码CodePen Demo -- width border animation
接下来，会开始加深一些难度。
虚线边框动画
使用 dashed 关键字，可以方便的创建虚线边框。
div {border: 1px dashed #333;}当然，我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种，譬如渐变就是一种很好的方式：
div {background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;background-size: 4px 1px;background-position: 0 0;}复制代码看看，使用渐变模拟的虚线如下：
好，渐变支持多重渐变，我们把容器的 4 个边都用渐变表示即可：
div {background:linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(0deg, #333 50%, transparent 0) repeat-y,linear-gradient(0deg, #333 50%, transparent 0) repeat-y;background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;background-position: 0 0, 0 100%, 0 0, 100% 0;}复制代码OK，至此，我们的虚线边框动画其实算是完成了一大半了。虽然
