css实现图形边框

html部分

<template>
  <div class="app-wrapper">
    <div class="home">
      <div class="border-box">图形边框</div>
    </div>
  </div>
</template>

css部分

<style lang="scss" scoped>
.app-wrapper{
  padding: 50px;
  width: 1000px;
  height: 700px;
  background: #0d0647 url('~@/assets/img/main_bg.png') no-repeat;
}
.home{
  width: 300px;
  height: 200px;
  background-color: rgba($color: #1d4b99, $alpha: .2);
}
.border-box{
  padding-top: 0;
  width: 300px;
  height: 200px;
  text-align: center;
  color: #fff;
  border: 20px solid transparent;
  border-image: url('~@/assets/img/home_border.png') 30 30 stretch;
}
</style>