移动端1px边框解决方案

最新推荐文章于 2024-07-05 17:35:21 发布

程序员少北晨

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签：移动端

本文链接：https://blog.csdn.net/sinat_29412671/article/details/70198256

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

自己今天看网易云音乐的时候，看着里面的1px实在是好看，没办法，强迫症，然后自己把vuejs项目中的1px优化了。话不多说，上代码。

css名写在最外div即可

.borderBottom1px {
  width: 100%;
  height: 100%;
  position: relative;
}
.borderBottom1px:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  background-color: #c8c7cc;
  transform: scaleY(0.5);
}
.borderRight1px{
    width: 100%;
    height: 100%;
    position: relative;
  }
.borderRight1px:after{
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    right: 0;
    bottom: 68px;
    height: 100%;
    background-color: #c8c7cc;
    transform: scaleX(0.5);
  }