CSS-边框1-边框背景图

1、边框背景概述

1.1 border-image-source

border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。

1.2 border-image-slice

border-image -slice属性指定图像的边界向内偏移。

值	说明
number	数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
fill	保留图像的中间部分

1.3 border-image-repeat

值	描述
stretch	默认值。拉伸图像来填充区域
repeat	平铺（repeated）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

1.4 border-image-width

border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。

值	描述
length	距离多少像素
percentage	百分比
number	边框宽度多少倍数

1.5 border-image-outset

border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

值	描述
length	距离多少像素
percentage	百分比
number	边框宽度多少倍数

2、背景裁剪

border-image-slice ：上、右、下、左。

边框背景图剪裁

3、边框背景重复效果

源代码

    
    
    


    
border-image-repeat: stretch;
    

        border-image-repeat: repeat;

        repeat简单粗暴，会有不完整的情况。
    
    

        border-image-repeat: repeat;

        round会拉伸压缩比repeat效果好。
    

运行效果:

背景图重复