将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>