<template>
  <div>
    <span class="borderLeft1 boxBorder"></span>
    <span class="borderLeft2 boxBorder"></span>
    <span class="borderRight1 boxBorder"></span>
    <span class="borderRight2 boxBorder"></span>
  </div>
</template>

<script setup lang="ts">
// 这个组件专门用于渲染盒子边框装饰元素
</script>

<style scoped>
.boxBorder {
  position: absolute;
  padding: 5px;
  border-style: solid;
  border-color: rgb(71, 209, 226);
}

.borderLeft1 {
  border-width: 1px 0 0 1px;
  top: -1px;
  left: -1px;
}

.borderLeft2 {
  border-width: 1px 1px 0 0;
  top: -1px;
  right: -1px;
}

.borderRight1 {
  border-width: 0 0 1px 1px;
  bottom: -1px;
  left: -1px;
}

.borderRight2 {
  border-width: 0 1px 1px 0;
  bottom: -1px;
  right: -1px;
}
</style>
<script lang="ts">
export default {
  name: 'BoxBorders',
}
</script>
