今天完成的事情：任务六
明天计划的事情：任务7
遇到的问题：

未解决：

采用linear-gradient（）作为border-image的背景时；不理解border-image-slice怎么去裁切的

收获：

如何画一个渐变色的边框：

采用linear-gradient属性

linear-gradient(to 方向，color1, color2, color3) 1 100%;

    border-right-width: 1px;

    border-right-style: solid;

border-image: linear-gradient(to bottom, #fff,#e1e5e7,#fff) 1 100%;

此处的1 100%和分别代表什么意？

测试发现如果不写1则不产生边框线；却又不是宽度；100%写不写没什么影响

审查发现：

是border-image-slice：1 100%;

border-image-slice

图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：

图中，橙红色的四个边角的菱形区域称为“角边框图片”，在border-image中，角边框图片是没有任何展示效果的，不会平铺，不会重复，也不会拉伸，有点类似于视觉中盲点的意思。

而对边的四个橙黄色区域属于展示效果的作用区（也是边框宽度计算剩余区），上下区域即border-top-image和border-bottom-image区域受到展示效果属性的第一个参数——水平方向效果影响：如果为repeat，则此区域图片会水平重复，如果是round，则此框框内的图片会水平平铺，如果是stretch，则此矩形域中的图片就会被水平拉伸。（下部分的实例会做具体演示）左右区域只有垂直方向上的效果，与上下区域效果对应，不多说。

中间的区域（左图的空白格）受到全部参数的作用，在水平和垂直两个维度上都有展示效果（平铺、拉伸等）。

border-image绘制原理简述
我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。

1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片。

2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格。

3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。

4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。

使用普通图片作border-image时，用border-image-slice：10；表示在图片的距离上下左右的10px处剪切出九宫格，并填充到对应的border区域中；

但是采用linear-gradient（black，white，black，）作border-image，对border-image-slice仍不是很清楚其作用原理；