border-image设置图片边框
语法：
border-image: source slice width outset repeat|initial|inherit;
border-image-source
- 指定要使用的图像
- 语法:
border-image-source: none | image;
border-image-slice
- 指定图像的边界向内偏移。
- 语法：
border-image-slice: number | % | fill;
| 值 | 说明 |
|---|---|
| % | 百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度 |
| number | 数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像） |
| fill | 保留图像的中间部分 |
border-image-width
- 指定图像边界的宽度。
- 语法：
border-image-width: number | % | auto;
| 值 | 说明 |
|---|---|
| % | 边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积 |
| number | 表示相应的border-width 的倍数 |
| auto | 如果指定了，宽度是相应的image slice的内在宽度或高度 |
border-image-outset
- 指定在边框外部绘制 border-image-area 的量。
- 语法：
border-image-outset: length | number;
| 值 | 说明 |
|---|---|
| length | 设置边框图像与边框（border-image）的距离，默认为0。 |
| number | 相应的 border-width 的倍数 |
border-image-repeat
- 指定图像边界如何铺满。
- 语法：
border-image-repeat: stretch | repeat | round | space | initial | inherit;
| 值 | 说明 |
|---|---|
| stretch | 拉伸图像来填充区域 |
| repeat | 平铺（repeated）图像来填充区域 |
| round | 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域 |
| space | 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围 |
点击查看HTML代码
示例图片： 
border-image-slice:
border-image-width:
border-image-outset:
border-image-repeat:
border-image-slice:{{slice}};
border-image-width:{{width}};
border-image-outset:{{outset}};
border-image-repeat:{{repeat}};
点击查看JS代码
export default {
data() {
return {
slice: '40%',
width: '2',
outset: 0,
repeat: 'round',
}
},
watch: {
slice( newV ){
this.$refs.resultShow.style.borderImageSlice = newV;
},
width( newV ){
this.$refs.resultShow.style.borderImageWidth = newV;
},
outset( newV ){
this.$refs.resultShow.style.borderImageOutset = newV;
},
repeat( newV ){
this.$refs.resultShow.style.borderImageRepeat = newV;
}
},
}
点击查看SCSS代码
.dynamic-border-res-contain {
height: 100%;
display: flex;
.dynamic-border-example {
margin: auto;
text-align: left;
&>div {
display: flex;
margin: 5px 0;
}
.label {
width: 170px;
text-align: right;
}
.dynamic-border-result {
display: flex;
.result-html{
padding: 30px ;
margin-right: 150px;
line-height: 35px;
color: #409eff;
border: 1px solid #409eff;
}
.result-show {
margin: calc(3 * 20px) auto;
width: 300px;
height: 150px;
border: 20px solid yellowgreen;
border-image-source: url('../../assets/image/dynamic-border.png');
border-image-slice: 40%;
border-image-width: 2;
/* border-image-outset: 1; */
border-image-repeat: stretch;
}
}
}
}