第二种跟第一种很相似，不过有一点进步，在border-image上，横向循环背景图片。

下面我们来讲第三种方式如何优雅地实现斜条纹背景框。

只需几行，随用随改，你想发生什么故事都可以。

.linear-border {
height: 5rem;
border-style: solid;
border-width: .2rem;
border-image: repeating-linear-gradient(-45deg,
#E8544D,
#E8544D 10px,
white 10px,
white 20px,
#75ADF8 20px,
#75ADF8 30px,
white 30px,
white 40px);
border-image-slice: 5;
}

下面来逐个分析这两个知识点 repeating-linear-gradient 和 border-image-slice。

1. repeating-linear-gradient

总共有两个参数

第一个参数表示线性渐变的方向，可以是角度( -45deg )也可以是方向( left top )。

第二个参数表示起点颜色和终点颜色。指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

我的例子里面就是通过第一个参数设定了-45度，然后从0-40px每10px依次变换蓝，白，红，三种颜色。

2. border-image-slice

这个属性顾名思义，就是很简单的直译，边框图片切片，把边框图片四分五裂，再重新安置，变形，其方位规则符合CSS普遍的方位规则（与margin，padding等或border-width一致），上右下左顺时针。如果你只声明了 border-image-source 和 border-width 或 border-image-width 没有任何切片，则整个未切割的图像将放置在元素的四个角上，缩放到指定的宽度。如果你想实现背景图片循环展示就得借助于border-image-slice，它的主要功能是锁定背景图片的四个角，然后在其他区域根据参数循环剩余部分，如果想填充内容部分，选择fill即可。

推荐阅读：