使用css 给div添加四角线框

1. 效果图

话不多说，先上效果图

如果是你需要的效果请点个赞鼓励一下喔~

2. 功能实现

1. 先创建div容器

   {{ title }}

   数据截止至 {{ dataEndTime }}

   <slot></slot>

2. 样式代码

   .top {
   height: 100%;
   padding: 12px 20px;
   box-sizing: border-box;
   border: 1px solid #656767;
   background:
   linear-gradient(to bottom,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) left 2px top 2px no-repeat,
   linear-gradient(to right,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) left 2px top 2px no-repeat,
   linear-gradient(to bottom,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) right 2px top 2px no-repeat,
   linear-gradient(to left,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) right 2px top 2px no-repeat,
   linear-gradient(to top,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) left 2px bottom 2px no-repeat,
   linear-gradient(to right,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) left 2px bottom 2px no-repeat,
   linear-gradient(to top,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) right 2px bottom 2px no-repeat,
   linear-gradient(to left,#F7702A 0px,#F7702A 2px,transparent 3px,transparent 100%) right 2px bottom 2px no-repeat;
   background-size: 0.5rem 0.5rem;
   }

3. 代码解析：

如何需要边框四个角进贴着容器周围

后面的 left 2px top 2px no-repeat 等 改为 left top no-repeat 即可

3. 结束语

制作不易，点个赞再走吧