CSS科技感四角边框

需求：在做大屏数据时经常会看到那些四角边框

效果图：

 分析：

1.先画出整个大边框

2.然后用::before和::after分别画出两对边框覆盖大边框的上下左右四边，只留下四个角

实现（示例代码）：

<template>
  <div class="box">
    <div class="border_item"></div>
  </div>
</template>

<script>
export default {
  name: "border",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 750px;
  background-color: #040d32;
}
.border_item {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 300px auto;
  background: rgba(1, 19, 67, 0.8);
  border: 2px solid #00a1ff;
  border-radius: 8px;
}
.border_item::before {
  position: absolute;
  content: "";
  to