移动端0.5px实现过程入的坑---有的下边框无法显示

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

weixin_37347069

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

阅读量3.3k

点赞数 1

分类专栏：前端技术文章标签： 0.5px边框下边框无法显示 px转rem

本文链接：https://blog.csdn.net/weixin_37347069/article/details/84791755

版权

前端技术专栏收录该内容

18 篇文章 0 订阅

订阅专栏

众所周知在移动的端写1px边框，显示出来的效果看起来比较粗，那么下面介绍一种常见的0.5px 的实现方案；

利用css3的缩放方式实现，其原理是：transform:scale()来达到压缩一半的目的。
html部分：

 <ul class="cardList" v-show="selected == 1">
       <li class="cardItem" v-for="(item, index) in debitList" :key="index">
             <img :src="bankImg(item.linkCode)"/><span>{{item.bankName}}</span>
        </li>
 </ul>

css3部分：

 .cardItem{
        height:99px;
        position: relative;
        border:none;
        display: flex;
        align-items: center;
      }
      .cardItem:after{
        position: absolute;
        content: '';
        bottom: 0;
        background: #E9E9E9;
        width: 750px;
        height:1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }

在这里插入图片描述

效果如上，咦！！！怎么有的下边框不见了呢？经过一番的摸索，发现原来是自己配置了px转 rem导致，因此 cardItem:after中height:1px;会转成相应的rem值，至于为什么导致有的下边框无法显示，个人还是没想明白，在控制台追踪的时候，发现每个 cardItem:after 都是有相同的宽高，还望大神指点！

解决方案： css3中 .cardItem:after中的height值改成height:1px;/*no*/ ,设置/*no*/后就不会将px转成rem了。