设置四个div元素为行内块级元素：display:inline-block;（此时p元素依然是块级元素）
这个时候布局基本是下面的样子
然后在使用相对定位将四个边框的top/bottom/left/right位置进行调整
最后就是将对应的border边框进行修改，比如：左上角的div#box1只设置border–top和border-left；左下角的div#box3只设置border-left和border-bottom。
修改完成后的样式：
四.个人简介
个人简介组件代码：srccomponentsAboutUsAboutUs.vue
1.源代码
<template>
<div class="aboutus">
<div class="title">
<el-divider content-position="center">个人简介</el-divider>
<p><el-tag>xxxx大学</el-tag><el-tag>本科</el-tag></p>
</div>
<el-card class="box-card" style="margin-bottom: 20px;">
<div class="text item">
<el-row :gutter="110">
<el-col :span="8">
<div class="grid-content bg-purple">
于2005.07月毕业于<span class="large">某喵喵喵大学</span>，本科学历。在校专业为xxxxxxx，主修课程为xxxx、xxxx、xx和xxxx等课程。在校期间主要技能为java和php语言,和实验室小伙伴一起完成过内部管理平台(成员在线时长记录、周计划制定和组长评价)、纳新面试系统等。
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
毕业后在某某公司做web开发工作,主要的技能为css、javascript、jquery和python。主要参与的产品有xxxxxxx、xxxx。现就职于一家创业公司做web前端岗位，主要的技能为vue全家桶。
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
工作中比较自律，对待工作认真负责，喜欢<span class="large">不断学习</span>来提升自己。希望能找到一群志同道合的人一起工作，不断进步和成长。
</div>
</el-col>
</el-row>
</div>
<div class='topMask square'></div><div class='topMask circular'></div>
</el-card>
</div>
</template>
<script>
export default {
name: 'AboutUs'
}
</script>
<style>
.aboutus .grid-content.line{
border-right: 1px solid #ddd;
height: 150px;
}
