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代码
<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;
                }

            }
        }
    }
上一篇:Lesson2——NumPy Ndarray 对象


下一篇:Vue中h5调起微信支付