Mobile side implementation Border 0.5 pixels

To achieve a solid line of 0.5 pixels on the mobile side, here are the personal practice results

1. Through the background-image gradient effect linear-gradient realization:

<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;}

：

2. Through the Border-image border background map to achieve

 <  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;}

：

Mobile side implementation Border 0.5 pixels