CSS边框图片--跟着李南江学编程

一、形成border背景图片的原理

边框不只可以设置颜色，还可以设置背景图片，当给边框设置背景图片后，background-color属性会失效

设置边框颜色

            .box{
                width: 150px;
                height: 150px;
                margin: 0 auto;
                margin-top: 100px;
                border: 50px solid #000;
                /*边框颜色为黑色*/
                border-color:#000;
                background-color: red;
                box-sizing: border-box;             
            }

image.png

设置边框背景，将以下图片设为边框背景

border.jpg

            .box{
                width: 150px;
                height: 150px;
                margin: 100px auto;
                /*边框颜色为红色*/
                border: 50px solid #000;                
                background-color: red;
                /*设置边框背景图片*/
                border-image-source: url(img/border.jpg);
                box-sizing: border-box;             
            }

image.png image.png

图片bordr.jpg显示在边框的四个角，且边框的颜色（#000黑色）被边框的背景图片覆盖而消失。

那为什么边框的背景图片会按上面的图片那样展示，此时我们就要引入border-image-slice属性来解释。

image.png

slice 切 顾名思义，slice会把背景图片进行切割，再将切割好的图片放入border的指定位置，构成border的背景图片。
border-image-slice: 70 70 70 70; 上 右 下 左
注意slice属性没有单位
slice一共有四条切割线，方向分别是
从上到下 上（绿色）
从右到左 右（蓝色）
从下到上 下（紫色）
从左到右 左（棕色）
四个方向的切割线根据给定的数值往里推
按照这个规律，切割出来的小图片一共有9个，首先会将序号为1、3、7、9也就是四个顶点的小图片放到border中，再将2、4、6、8（除了5）放到border中。若slice的值不变，则四个顶点的图片固定不变。

image.png

再回顾上一个例子，由于我们只设置了border的背景图片，未给出slice的值，那么slice的数值默认是100%，则从四个方向以图片100%的比值往里推后，得出的图片是一个完整的图片，那么将切割出的图片放到border的四个角中，由于背景图片被完整切割，不存在 2、4、6、8部分，所以border的背景图片最终显示的就是，四个完整的小图片出现在border的四个顶点。

二、border背景图片的重复方式

            border-image-repeat: repeat;
            border-image-repeat:stretch;
            border-image-repeat:round;
            border-image-repeat:space

重复（repeat）、拉伸（stretch）、铺满（round）或空白（space）

1.border-image-repeat: repeat;
若宽度增加，但是slice不变，则四个角截取的部分不变 增加的border长度就让中间的部分(2、4、6、8)通过repeat 复制 进行填充，直到增加的长度达到一个小方块的值，就 添加一个新的小方块

image.png image.png

2.border-image-repeat:stretch;
若宽度增加，但是slice不变，则四个角截取的部分不变，增加的border长度的部分就让中间的部分通过stretch 拉伸 进行填充。

image.png

3.border-image-repeat:round;
round会 压缩（或伸展） 图片大小使其正好在区域内显示

image.png
image.png

注意：round和repeat的区别
round会压缩或伸展图片大小使其正好在区域内显示，而repeat不管三七二十一直接重复，而且是居中重复，多数情况建议大家可以用round，repeat会导致叠加现象

4.border-image-repeat:space
space 在还不满足达到增加一个新方块的长度时，这个过程都用 空白 来填充，达到时，就新增一个方块

image.png image.png

总结：
repeat 用图片复制填充，不满足一个方块的长度时，从一个方块上截取满足的部分进行填充
stretch 将中间的图片用拉伸进行新增长度的填充
round 当新增的长度不满足新增一个方块时，就将原有的方块进行拉伸填充，直到新增的长度满足一个新增方块长度时，加入新的方块
space 当新增的长度不满足新增一个方块时，用空白区域进行填充，直到新增长度满则新增的方块时，加入新的方块。

三、border-image-width：15px;

背景图片的宽度，注意不是border的宽度为15px，只是展示出背景图片的宽度为15px

image.png

四、两个参数

border-image-repeat: stretch space; 横向 竖直 只支持两个参数

image.png

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com