0.5像素线

1. meta viewport控制

1px像素线条

0.5像素线条

2. background-image
   利用背景图片渐变，从有色到透明，给人0.5像素的视觉体验

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()

可以直接增加一个元素使用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;
}