我们知道，在移动端1px的线很粗很难看，我们设置border-width：0.5；它也会自动转为1px，又言之，直接设置宽度使其为0.5是不可能的，这里我们就提供几种方法。
一：meta viewport控制 //1px像素线条<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">//0.5像素线条<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">不过此时要注意页面整体布局和图片方面的CSS变化。
二：使用border-image首先需要自己制作一个0.5像素的线条作为线条背景图片。
p{ border-width: 0 0 1px 0; border-image: imageUrl 2 0 round; } 三：使用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; } 四：使用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;}