手机页面中如何创建1px宽度的间隔线

来源：互联网发布：淘宝图片多少像素编辑：程序博客网时间：2024/04/30 01:37

这个问题自我从一开始编写页面的时候就困扰着，一直没找到解决方法。
1px是每个显示器能显示的最小单位，但由于在手机上显示的时候，需要添加 meta viewport 相关属性，导致页面最小单位不再是1px，大约在2px左右。

前些天在看微信css的时候，发现他们已经可以做出这种效果了。
研究了下，方法如下。

span{    position: relative; //因为::after内需要absolute    &::after{      position: absolute;      bottom: 0;      left: 55px;      right: 0;      content: '';      border-bottom: 1px solid #cccccc;      background-color: #cccccc;      transform-origin: 0 100%;  //最重要的是这两个      transform: scaleY(.5);     //最重要的是这两个，设置纵向缩放50%    }  }

演示效果如下（看不清的右击在新窗口中打开图片）：

之前是这样的（非1px）

之后是这样的（1px），会有种很精致的感觉

0 0