边框长度变化
先来个比较简单的，完结一个相似这样的边框作用：
这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框，下、右边框，经过hover时改动两个伪元素的高宽即可。非常好了解。
div{
position:relative;
border:1pxsolid#03A9F3;
&::before,
&::after{
content:””;
position:absolute;
width:20px;
height:20px;
}
&::before{
top:-5px;
left:-5px;
border-top:1pxsolidvar(–borderColor);
border-left:1pxsolidvar(–borderColor);
}
&::after{
right:-5px;
bottom:-5px;
border-bottom:1pxsolidvar(–borderColor);
border-right:1pxsolidvar(–borderColor);
}
&:hover::before,
&:hover::after{
width:calc(100%+9px);
height:calc(100%+9px);
}
}
接下来，会开始加深一些难度。
虚线边框动画
运用dashed关键字，能够便利的创建虚线边框。
div{border:1pxdashed#333;}
当然，咱们的目的是让边框能够动起来。运用dashed关键字是没有方法的。但是完结虚线的方法在CSS中有很多种，譬如突变便是一种很好的方法：
div{background:linear-gradient(90deg,#33350%,transparent0)repeat-x;background-size:4px1px;background-position:00;}
好，突变支撑多重突变，咱们把容器的4个边都用突变表示即可：
div{background:linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(0deg,#33350%,transparent0)repeat-y,
linear-gradient(0deg,#33350%,transparent0)repeat-y;
background-size:4px1px,4px1px,1px4px,1px4px;
background-position:00,0100%,00,100%0;}
至此，咱们的虚线边框动画其实算是完结了一大半了。虽然border-style:dashed不支撑动画，但是突变支撑呀。咱们给上述div再加上一个hover作用，hover的时分新增一个animation动画，改动元素的background-position即可。
div:hover{
animation:linearGradientMove.3sinfinitelinear;
}
@keyframeslinearGradientMove{
100%{
background-position:4px0,-4px100%,0-4px,100%4px;
}
}
OK，看看作用，hover上去的时分，边框就能动起来，由于整个动画是首尾相连的，无限循环的动画看起来就像是虚线边框在一向运动，这算是一个小小的障眼法或许小技巧：
这里还有别的一个小技巧，假如咱们希望虚线边框动画是从其他边框，过渡到虚线边框，再跋涉动画。完全由突变来模仿也是能够的，假如想节约一些代码，运用border会更快一些，譬如这样：
div{
border:1pxsolid#333;
&:hover{
border:none;
background:
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(0deg,#33350%,transparent0)repeat-y,
linear-gradient(0deg,#33350%,transparent0)repeat-y;
background-size:4px1px,4px1px,1px4px,1px4px;
background-position:00,0100%,00,100%0;
}
}
由于border和background在盒子模型上方位的差异，视觉上会有一个很明显的错位的感觉：
要想处理这个问题，咱们能够把border替换成outline，由于outline能够设置outline-offset。便能完美处理这个问题：
div{
outline:1pxsolid#333;
outline-offset:-1px;
&:hover{
outline:none;
}
}
最终看看运用到实际按钮上的作用：
其实由于布景和边框的特殊关系，运用border的时分，经过修正background-position也是能够处理的，便是比较绕。
突变的其他妙用
使用突变，不仅仅只是能完结上述的作用。
咱们继续深挖突变，使用突变完结这样一个布景：
div{
position:relative;
&::after{
content:”;
position:absolute;
left:-50%;
top:-50%;
width:200%;
height:200%;
background-repeat:no-repeat;
background-size:50%50%,50%50%;
background-position:00,100%0,100%100%,0100%;
background-image:linear-gradient(#399953,#399953),
linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),
linear-gradient(#377af5,#377af5);
}
}
注意，这里运用了元素的伪元素生成的这个图形，而且，宽高都是父元素的200%，超出则overflow:hidden。
接下来，给它加上旋转：
div{
animation:rotate4slinearinfinite;
}
@keyframesrotate{
100%{
transform:rotate(1turn);
}
}
看看作用：
最终，再使用一个伪元素，将中间遮罩起来，一个Nice的边框动画就出来了(动画会呈现半透明元素，便利暗示看懂原理)：
改动突变的色彩
掌握了上述的基本技巧之后，咱们能够再对突变的色彩做一些调整，咱们将4种色彩变成1种色彩：
div::after{content:”;position:absolute;left:-50%;top:-50%;width:200%;height:200%;background-color:#fff;background-repeat:no-repeat;background-size:50%50%;background-position:00;background-image:linear-gradient(#399953,#399953);}
相同的，让它旋转一同，一个单色追逐的边框动画就出来了：
Wow，很不错的姿态。不过假如是单线条，有个很明显的缺点，便是边框的末尾是一个小三角而不是垂直的，或许有些场景不适用或许PM接受不了。
那有没有什么方法能够消除去这些小三角呢？有的，鄙人文中咱们再介绍一种方法，使用clip-path，消除去这些小三角。
clip-path的妙用
又是老朋友clip-path，有意思的工作它总不会缺席。
clip-path本身是能够进行坐标点的动画的，从一个裁剪形状变换到别的一个裁剪形状。
使用这个特色，咱们能够巧妙的完结这样一种border跟从作用。伪代码如下：
div{
position:relative;
&::before{
content:””;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:2pxsolidgold;
animation:clippath3sinfinitelinear;
}
}
@keyframesclippath{
0%,
100%{
clip-path:inset(0095%0);
}
25%{
clip-path:inset(095%00);
}
50%{
clip-path:inset(95%000);
}
75%{
clip-path:inset(00095%);
}
}
作用图与暗示图一同：
这里，由于会裁剪元素，借用伪元素作为布景进行裁剪并动画即可，运用clip-path的优点了，切开出来的边框不会发生小三角。一起，这种方法，也是支撑圆角border-radius的。
假如咱们把别的一个伪元素也用上，实际完结一个按钮样式，能够得到这样的作用：
border-image的妙用
便能够使用border-image-slice及border-image-repeat的特性，得到相似的边框图画：
div{width:200px;height:120px;border:24pxsolid;border-image:url(image-url);border-image-slice:32;border-image-repeat:round;}
在这个基础上，能够随意改动元素的高宽，如此便能扩展到任意大小的容器边框中。
css代码怎么设置虚线分割线
在网页布局中，有时为了全体网页的漂亮，咱们需求设置不同的边框样式。那么怎样设置边框的虚线样式？本篇文章就给大家介绍css设置边框虚线样式的两种方式。有一定的参考价值，有需求的朋友能够参考一下，希望对你有所帮助。
首要要知道在css中咱们是运用border特点来设置边框的，它能够经过设置边框的宽度、色彩、圆视点、样式(实线、虚线、双线等等)。
下面咱们经过简略的代码示例来具体看看css的border边框特点是怎样设置边框虚线的。
.box1{undefined
border:4pxdashedpalegoldenrod;
padding:10px;
}
.box2{undefined
border:5pxdottedpink;
padding:10px;
}
这是一段测验文字1，完成虚线边框
这是一段测验文字2，完成虚线边框
作用图：
咱们能够看出，cssborder边框特点能够设置两种不同的边框的虚线样式，分别是经过border边框特点中dotted跟dashed两个特点值设置的。下面咱们来看看border设置这两个特点值的作用：dashed：能够界说虚线，这样边框就能够呈现扁状的虚线样式。
dotted：界说点状边框，使得边框呈现连续的点状，从而完成边框的点状虚线样式。
注：所有浏览器都支撑border特点，不必忧虑兼容性。
