css border渐变_你并不一定非得在border里面加载图片之如何正确使用border-image-CSDN博客

本文链接：https://blog.csdn.net/weixin_32329555/article/details/112116889

JS Binjsbin.com

本周讲一个常用的需求，边框的斜条纹如何实现，demo链接在上面，主要用到了个核心知识点 repeating-linear-gradient 和 border-image-slice。

这个需求通常来讲有这么三种实现方式。

第一种参考网易严选，通过设计切图，然后在元素周边新建另外几个div，然后在这些辅助div里面横向重复背景图片。

第二种跟第一种很相似，不过有一点进步，在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即可。