《前端学习》-css之border-image记录

border-image : 设置图像用作围绕元素的边框，必须要先设置border属性才能起作用。

border-image的三大部分：

1、用作边框的图像：border-image-source属性；

定义：规定边框使用的图像，代替border-style属性中设置的边框样式，如果值为“none”,或者图像无法显示，则使用border-style设置的边框样式，可使用绝对路径与相对路径，例：

div{border-image-source : url(border.jpg);
}

2、在哪里裁切图片：border-image-slice属性；

定义：规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域，除非使用了关键字fill，否则中间的图像会被丢弃。

属性值：属性值可以是数值、百分数、fill关键字，属性值不能带单位。如果是数值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像），默认单位是px。如果是百分数，表示相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移，可以使用图像的宽度和高度分别乘以对应的数值来换算为具体的数值后进行截取。

属性值可以是1-4个数，数值为1个时表示四边偏移量相同；数值为2个时，第1个数据表示上、下侧边缘的向内偏移值，第2个数据表示左、右侧边缘的向内偏移值；数值为3个时，第1个数据表示上侧边缘的向内偏移值，第2个数据表示左、右侧边缘的向内偏移值，第3个数据表示下侧边缘的向内偏移值；数值为4个时，第1个数据表示上侧边缘的向内偏移值，第2个数据表示右侧边缘的向内偏移值，第3个数据表示下侧边缘的向内偏移值，第4个数据表示左侧边缘的向内偏移值。

使用例子：

图像的width : 80px;height : 80px;

设置的border-image-slice : 10 20 30 40;(不可带单位，如果值为数值，则默认单位为px)

数据解释：

10：即10px，表示从图像的上边向下截取，截取的长度为10px；

20：即20px，表示从图像的右边向左截取，截取的长度为20px；

30：即30px，表示从图像的下边向上截取，截取的长度为30px；

40：即40px，表示从图像的左边向右截取，截取的长度为40px；

如图所示，选择的边框图片被截取为九个部分，四个角，四条边。

其中四个角的控制数据为：

1、左上角

border-top-left-image : 图片的左上角，控制数据为（top、left），在图像中距顶边top长度，距左边left长度截取的矩形即为其左上角。截取的左上角图片会被放置在待设置边框的左上角；

2、右上角

border-top-right-image：图片的右上角，控制数据为（top 、right），在图像中距顶边top长度，距右边right长度截取的矩形即为其右上角。截取的右上角会被放置在待设置边框的右上角；

3、右下角

border-right-bottom-image：图片的右下角，控制数据为（right 、bottom），在图像中距右边right长度，距下边bottom长度截取的矩形即为其右下角。截取的右下角会被放置在待设置边框的右下角；

4、左下角

border-left-bottom-image：图片的左下角，控制数据为（left 、bottom），在图像中距左边left长度，距下边bottom长度截取的矩形即为其左下角。截取的左下角会被放置在待设置边框的左下角；

四条边的控制数据为：

1、上边框

border-top-image : 控制数据为（top 、left、right）,在图像中距上边top长度，距左边left长度，距右边right长度截取的矩形。截取的矩形会被作为待设置边框的上边框（边框左上角至右上角中间部分）；

2、右边框

border-right-image : 控制数据为（top 、right、bottom）,在图像中距上边top长度，距右边right长度，距下边bottom长度截取的矩形。截取的矩形会被作为待设置边框的右边框（边框右上角至右下角中间部分）；

3、下边框

border-bototm-image : 控制数据为（left 、right、bottom）,在图像中距左边left长度，距右边right长度，距下边bottom长度截取的矩形。截取的矩形会被作为待设置边框的下边框（边框左下角至右下角中间部分）；

4、左边框

border-right-image : 控制数据为（top 、left、bottom）,在图像中距上边top长度，距左边left长度，距下边bottom长度截取的矩形。截取的矩形会被作为待设置边框的左边框（边框左上角至左下角中间部分）；

注意：每一次截取图片，都是对初始的完整图片进行截取，就像每次剪纸时，都会用一张完全相同的新纸张进行剪纸，而不是在上一次剪纸残留的基础上进行剪纸。

特殊情况：

1、当设置的截取的【top + bottom >= 图片的height 】或者【top的百分比 + bottom的百分比 >= 100%】时，截取的左右边框为空白。因为左边框的控制数据为（top、right、bottom），右边框的控制数据为（top、left、bottom）,都与top、bottom的值相关，当其长度之和大于图片的高度，或者其百分比之和大于100%，表示截取时出现重合，此时截取图形的高度为0，即表示空白，如下图；

2、当设置的截取的【left + right >= 图片的width】或者【left的百分比 + right的百分比 >= 100%】时，截取的上下边框为空白。因为上边框的控制数据为（top、left、right）,下边框的控制数据为（left、right、bottom），都与left、right的值相关，当其长度之和大于图片的宽度，或者其百分比之和大于100%，表示截取时出现重合，此时截取图形的高度为0，即表示空白，如下图；

图片的width : 80px ,height : 80px;

设置border-image-slice : 50;（四边都是50px）

（就像是我想要截取上边框，控制数据为（top、left、right），我用剪刀剪了top宽的纸带，然后按照要求，我应该左边剪left长度，右边剪right长度，剩下的就是上边框，但是当left + right >= width时，左边剪完一剪刀，右边不够剪或者刚好剪完，就没有剩下的内容了，即空白。）

3、定义中间部分（边框的四条边，不包括四个角）应重复还是拉伸：border-image-repeat.

规定如何重复图像边框。

stretch：拉伸图像来填充区域，默认值；

repeat：平铺（重复）图像来填充区域，当完整图像不够填充时，会截取部分来填充满区域；

round：类似repeat值，如果无法完整铺平所有图像，则对图像进行缩放以适应区域，不会截取图像的部分来填充区域，即区域内所有图像都是完整的。

border-image-repeat可以设置0-2个值，设置1个值时，所有边框的样式都相同，设置2个值时，第1个值表示上下边框的显示样式，第2个值表示左右边框的显示样式。

注意：border-image-repeat只负责上下左右边框，不会影响四个角的样式，即边框的四个角不会进行拉伸或重复填充。