vue移动端

余一痴

已于 2022-02-17 15:50:56 修改

阅读量488

点赞数

分类专栏：项目中遇到的问题 vue项目前端文章标签： vue.js javascript css3

于 2022-02-17 15:46:06 首次发布

本文链接：https://blog.csdn.net/yycnf/article/details/122984838

版权

前端同时被 3 个专栏收录

45 篇文章 6 订阅

订阅专栏

vue项目

23 篇文章 0 订阅

订阅专栏

项目中遇到的问题

12 篇文章 0 订阅

订阅专栏

移动端实现如下图竖线加上下边框

在这里插入图片描述

<div class="layer">
      <div class="layer-header"></div>
</div>

/*样式代码*/
.layer{
  width: 100%;
  background: #fff;
}
.layer-header{
  height: 30px;
  position: relative;
  padding:0 10px;
}
.layer-header::before{
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  top: 0;
  background: #ff8a2f;
}
.layer-header::after{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  transform: scale(.5,.5);
  transform-origin: left top;
  border:1px solid lightgray;
  /* 左右没有边框 */
  border-left: none;
  border-right: none;
  box-sizing:border-box;
}