border-image详解

border-image

border-image-slice: ; 默认值100%会将整个图放到div四个角落

如上图所示：该属性的值指的是边框到四条界线的距离。通过线将图片划分为四个部分充当border。设置不同的值就是调整

四条界线的位置从而实现不同的效果。

border-image-repeat: repeat;

border-image-repeat: space;

border-image-repeat: round ;

<div class="first"></div>

css

* {
    margin: 0;
    padding: 0;
}
html {
    /*background-color: black;*/
}
/*border-image-slice 表示切片 拥有5个属性值表示切线位置 顺序上右下左
第五个属性fill将内容区填满限制在渐变色中*/
.first {
    width: 100px;
    height: 100px;
    border: 20px solid;
    /*支持渐变色设置 三件套*/
    border-color: blue;
    /*这两个属性有冲突，设置了source，bordercolor会失效*/
    border-image-source: linear-gradient(red,blue);
    border-image-source: url("1.png");
    border-image-slice: 10;
    /*设置背景图片向外延伸展示的大小'不允许添负值*/
    border-image-outset: 100px;
    /*设置border图片展示的大小占border大小的倍数默认值1倍。也可以填写像素值*/
    /*如果填写倍数系统会将倍数值与border像素值相乘得到20*1 = 20px*/
    /*如果填写auto的话会向slice看齐计算相应的值 会将slice值直接添加px单位*/
    border-image-width: 1;
    /*repeat白色方块重复铺满 切片添加
    spacediv宽度每次增加白色方块原宽度的一半的大小时整体重复一下白色方块
    例如div宽200px 白色方块100px时 div宽度增加到250时白色方块多一个注意时整体加入不是切片加入不到临界值时选择间隔*/
    /*stretch白色方块 拉伸填满
    round当div宽度每次增加白色方块原宽度的一半的大小时整体重复一下白色方块
    例如div宽200px 白色方块100px时 div宽度增加到250时白色方块多一个注意时整体加入不是切片加入不到临界值时选择拉伸*/
    /*首先slice将背景图片切片为九个部分，四个角落方块不变化。
    只作用于中间的白色方块。拉伸、重复等效果*/
    border-image-repeat: space;
    /*一个表示水平、另一个表示垂直*/
    /*border-image-repeat: space round;*/
    /*以上的属性可以将其整合到border-image*/
    /*border-image: url("1.png") 100 fill repeat;*/

}