div只有四个角有边框（vue组件）

<template lang="html">
  <div class="frameDiv">
    <div class="frame">
      <div class="title">{{ title }}</div>
      <div class="num">{{ num }}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'frameDiv',
  props: {
    title: String,
    num: Number
  }
}
</script>

<style lang="less" scoped>
  .frameDiv {
    position: relative;
    margin-right: 18px;
    background:rgba(56,62,88,0.8);
    .frame {
      position: absolute;
      // top: -1px;
      // left: -1px;

      width: 154px;
      height: 71px;

      box-shadow:0px 0px 9px 0px rgba(82,255,226,0.23) inset;
      background: linear-gradient(to left, #00CDA2, #00CDA2) left top no-repeat,
                  linear-gradient(to bottom, #00CDA2, #00CDA2) left top no-repeat,
                  linear-gradient(to left, #00CDA2, #00CDA2) right top no-repeat,
                  linear-gradient(to bottom, #00CDA2, #00CDA2) right top no-repeat,
                  linear-gradient(to left, #00CDA2, #00CDA2) left bottom no-repeat,
                  linear-gradient(to bottom, #00CDA2, #00CDA2) left bottom no-repeat,
                  linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat,
                  linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat;
      background-size: 3px 9px, 9px 3px, 3px 9px, 9px 3px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(138,146,175,0.6);
      }
      .num {
        font-size:26px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:rgba(0,205,162,1);
      }
    }
  }
</style>

效果图

来源：CSDN

作者：笑笑菇凉

链接：https://blog.csdn.net/qingwu1104/article/details/104751524