当前位置：首页 > news >正文

使用css 给div添加四角线框

news 2025/11/6 11:49:51

1. 效果图

话不多说，先上效果图

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

2. 功能实现

1. 先创建div容器

 <div class="top" :class="{ 'border-bottom': borderBottom }"><div class="top-item"><div class="top-item-title"><img src="@/assets/images/box_icon.png" alt="">{{ title }}</div><span v-if="dataEndTime" class="data-end-time">数据截止至 {{ dataEndTime }}</span></div><slot></slot></div>

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 即可