语法：
border-image: source slice width outset repeat|initial|inherit;
border-image-source
border-image-slice
| 值 |
说明 |
| % |
百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度 |
| number |
数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像） |
| fill |
保留图像的中间部分 |
border-image-width
| 值 |
说明 |
| % |
边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积 |
| number |
表示相应的border-width 的倍数 |
| auto |
如果指定了，宽度是相应的image slice的内在宽度或高度 |
border-image-outset
| 值 |
说明 |
| length |
设置边框图像与边框（border-image）的距离，默认为0。 |
| number |
相应的 border-width 的倍数 |
border-image-repeat
| 值 |
说明 |
| stretch |
拉伸图像来填充区域 |
| repeat |
平铺（repeated）图像来填充区域 |
| round |
类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域 |
| space |
类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围 |
点击查看HTML代码
<div class='dynamic-border-res-contain'>
<div class="example-img">
示例图片： <img width="40" height="40" src="../../assets/image/dynamic-border.png" alt="">
</div>
<div class="dynamic-border-example">
<div class="border-image-slice">
<div class="label">border-image-slice:</div>
<el-select v-model="slice" placeholder="border-image-slice" size="small">
<el-option-group key="number" label="number">
<el-option label="2" key="2" value="2"></el-option>
<el-option label="20px" key="20px" value="20px"></el-option>
</el-option-group>
<el-option-group key="percent" label="percent">
<el-option label="10%" key="10%" value="10%"></el-option>
<el-option label="20%" key="20%" value="20%"></el-option>
<el-option label="30%" key="30%" value="30%"></el-option>
<el-option label="40%" key="40%" value="40%"></el-option>
</el-option-group>
<el-option-group key="fill" label="fill">
<el-option label="fill" key="fill" value="fill"></el-option>
</el-option-group>
</el-select>
</div>
<div class="border-image-width">
<div class="label">border-image-width:</div>
<el-select v-model="width" placeholder="border-image-slice" size="small">
<el-option-group key="number" label="number">
<el-option label="2" key="2" value="2"></el-option>
<el-option label="20px" key="20px" value="20px"></el-option>
</el-option-group>
<el-option-group key="percent" label="percent">
<el-option label="1%" key="1%" value="1%"></el-option>
<el-option label="5%" key="5%" value="5%"></el-option>
<el-option label="10%" key="10%" value="10%"></el-option>
<el-option label="15%" key="15%" value="15%"></el-option>
</el-option-group>
<el-option-group key="fill" label="fill">
<el-option label="fill" key="fill" value="fill"></el-option>
</el-option-group>
</el-select>
</div>
<div class="border-image-outset">
<div class="label">border-image-outset:</div>
<el-select v-model="outset" placeholder="border-image-slice" size="small">
<el-option-group key="length" label="length">
<el-option label="4px" key="4px" value="4px"></el-option>
<el-option label="10px" key="10px" value="10px"></el-option>
</el-option-group>
<el-option-group key="number" label="number">
<el-option label="0" key="0" value="0"></el-option>
<el-option label="2" key="2" value="2"></el-option>
<el-option label="3" key="3" value="3"></el-option>
</el-option-group>
</el-select>
</div>
<div class="border-image-repeat">
<div class="label">border-image-repeat:</div>
<el-select v-model="repeat" placeholder="border-image-slice" size="small">
<el-option label="stretch" key="stretch" value="stretch"></el-option>
<el-option label="repeat" key="repeat" value="repeat"></el-option>
<el-option label="round" key="round" value="round"></el-option>
<el-option label="space" key="space" value="space"></el-option>
</el-select>
</div>
<div class="dynamic-border-result">
<div class="result-html">
border-image-slice:{{slice}};<br/>
border-image-width:{{width}};<br/>
border-image-outset:{{outset}};<br/>
border-image-repeat:{{repeat}};<br/>
</div>
<div ref="resultShow" class="result-show"></div>
</div>
</div>
</div>
点击查看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;
}
}
}
}