标签：repeat image 边框 width slice 图像 border
语法：
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;
}
}
}
}
标签：repeat,image,边框,width,slice,图像,border
来源： https://www.cnblogs.com/-LemonWater-/p/15814354.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
