1. meta viewport控制

1px像素線條
<meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=0">
0.5像素線條
<meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=0">

2. background-image
   利用背景圖片漸變，從有色到透明，給人0.5像素的視覺體驗(yàn)

p{
    background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%); 
    background-image: linear-gradient(bottom,red 50%,transparent 50%); 
    background-size:  100% 1px; 
    background-repeat: no-repeat; 
    background-position: bottom right; 
}

3. 使用transform:scale()

可以直接增加一個(gè)元素使用transform: scale()
.border-line{
    width:100%;
    height: 1px; 
    transform:scaleY(0.5);
    background: #f00;
}
或者transform: scale()+偽元素
p{
    position: relative;
}
p::before{
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0;  
    border-bottom: 1px solid #f00; 
    width: 200%; 
    height: 200%;
    transform-origin: 0 0; 
    transform: scale(0.5,0.5); 
    box-sizing: border-box;
}