移动端实现边框0.5像素

<p class="gradient">retina border-bottom 0.5px</p>

.gradient{
    width: 200px;
    height: 20px;
    background-position: left bottom;
    background-image:linear-gradient(to bottom,transparent 50%,#000 50%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

<p class="gradient">retina border 0.5px</p>

.gradient{
    width: 240px;
    height: 20px;
    border:1px solid #ddd;
    border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
    -webkit-border-image: url(data:image/gif;base64,R0lGODlhBQAFAIABAN3d3f///yH5BAEAAAEALAAAAAAFAAUAAAIHhB9pGatnCgA7) 2 stretch;
}