使用css给div添加四角边框的方法

使用css给div添加四角边框的方法

div添加四角边框，一般写法，我们会在四角分别放一个小方块设置边框，来实现效果，但当我们使用vue,或者需要封装称组件时，例如大屏的展示，如果将边框也封单独的组件，或许会觉得封装的太繁琐。这个时候我们直接使用全局css来实现这一效果，少一层封装，这样代码更方便维护。以上均为小编个人见解，只为跟大家分享下面的方法。

方法一：

• 首先前端使用class样式名字

       <div class="global_echarts_box">
            <p class="global_biaoti2">监管系统标题1</p>
       </div>

• css的实现

 lobal_echarts_box {
    position: relative;
    width: 100%;
    height: 32%;
    // csss实现四角边框
    // box-shadow: 0 0 1.5vw #1f69b9b9 inset;
    background:
            linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
            linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
            linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
            linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
            linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
            linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
            linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat,
            linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat;
    background-size: 1.5rem 1.5rem;
    padding:2px;   
}

添加之后的效果：

方法二：

• 首先前端使用class样式名字

       <div class="global_echarts_box">
            <p class="global_biaoti2">监管系统标题1</p>
       </div>

• css的实现

 global_echarts_box {
    position: absolute;
    width: 23%;
    height: 70%;
    top: 20vh;
    right: 4vh;
    // csss实现四角边框
    box-shadow: 0 0 1.5vw #1f69b9b9 inset;
    background: linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom;
    background-repeat: no-repeat;
    background-size: 0.1vw 1.5vw, 1.5vw 0.1vw; 
}

添加之后的效果：