border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-image border-top-image border-top-right-image
border-left-image border-right-image
border-bottom-left-image border-bottom-image border-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
在制作CSS动画的时候，经常会有这样的需求，
让一个方块 沿着给定的路径 运动。
如果运动路径是不规则的，通过设置 top ， left 的属性值，就显得非常困难了。
这时候可以借助svg来实现。
path 元素的形状是通过它的 d 属性 定义的，
d 属性的值，是一个“命令+参数”的序列。
其中， M 20 30 L 160 180 ，包含了2个命令序列，
M 20 30 ，表示将画笔移动到坐标 20,30 处，
L 160 180 ，表示从画笔当前位置，到 160,180 位置画直线。
path元素支持多种命令，可以参考这里， curve commands
html元素的CSS样式属性 offset-path ，表示 偏移路径 。
通过指定 offset-path 的值为path元素的 d 属性值，我们可以实现元素沿着给定的 path 路径运动。
其中， offset-distance 指定了元素偏移初始位置的百分比。
通过在 @keyframes 中逐帧更改 offset-distance ，可以实现动画效果。
我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ，
相应的也修改小方块的 offset-path 属性。
就可以实现小方块沿着path运动的效果了。
MDN: paths
MDN: offset-path
MDN: offset-distance
A How-to Guide to SVG Animation
Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths
