背景知识：border-image, gradient, 多重背景，CSS动画
背景知识讲解
1. border-image
边框应用背景图片，图片会自动被分割为四等分，分别用于四个边框。使用border-image属性时，会替换掉border-style属性设置的边框样式。如果boder-image-source为none或者图片不能显示时，会应用border-style属性。
语法
boder-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
初始值
border-image: none 100% 1 0s stretch
没有继承性
border-image-width 定义图像边框宽度
如果border-image-width大于指定的border-width,那么会向内部扩展
取值: 百分比 像素 number(border-width倍数) auto
all / vertical horizontal / top horizontal bottom / top right bottom left
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 0 / 80px 80px;
background使用渐变色实现多重背景
border-image也能达到同样效果，但是使用过程中有些注意事项：
1. border-image-slice改变时，还需要改变border-width
2. border-image-slice边框厚度指定为像素单位，不支持em单位
3. border-image-slice改变时，如果使用的是渐变色，可能需要修改色标的位置信息
蚂蚁行军边框
可以自定义各种特殊样式的虚线框: 虚线线段的颜色，长度及间隙。
脚注