将border 边框换成图片 border-image

<template>

  <div class="heart"></div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

:root {

    --url: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/hearts-border-image.png');

}

html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

div {

      position: relative;

    width: 200px;

    height: 120px;

    margin: auto;

}

.heart {

    border: 21px solid;

    border-image: var(--url) 21 round;

}

.star {

    border: 20px solid;

    border-image: var(--star);

    border-image-repeat: repeat;

    border-image-slice: 30%;  

    // border-image-width: 20px;  

}

</style>