用 css 画一条 0.5px 的线_画一条0.5px的线

用 css 画一条 0.5px 的线

移动端开发时, 由于屏幕是 retina, 即高清屏幕. 当写 1px 时, 实际的线宽为 2px. 会显得很粗.
此时就有了 0.5px 的需求: 主要应对 iPhone

.parent{  
position: relative;  
&:after{
/* 绝对定位到父元素低端，可以通过left/right的值控制边框长度或者定义width:100%;*/   
 position: absolute;
bottom: 0;    
left: 0;
    right: 0;
    /* 初始化边框 */
    content: '';
    box-sizing: border-box;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* 以上代码，实现了一个边框为1px的元素，下面实现0.5px边框*/
    transform: scaleY(0.5); // 元素Y方向缩小为原来的0.5
    transform-origin: 0 0; // CSS属性让你更改一个元素变形的原点
  } } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17