主要方法是缩小，逆 viewport 放大的操作，背景线性渐变用细分方式。简单起见（UI一般是640下的，相当于 device pixel ratio 等于2）选的0.5，实际应该做区分，以免渲染错误，比如三星9100g 的 Android 浏览器 device pixel ratio 是1.5，如果按0.5缩，有些写法会渲染不出细线来。

图片方式：

1. 默认，宽640x高1 px：

   <img src="line.png" height="1">

   通常失效

2. 宽320px 等比缩:

   <img src="line.png" style="width:50%">

   不灵活，比例不对时可能失效

3. background：

   <div style="width:100%; height:1px; background:url(line.png) no-repeat; background-size:cover"></div>

   通常失效，但常用来做非1px的图片的响应式适配

4. transform scale:

   <img src="line.png" style="transform:scale(.5); transform:scale(.5)">

推荐使用，不灵活，兼容性比border-image强，比例不对时一般也能正常显示

5. border-image：

   1px

   border-image:url(line2.png) 2 repeat; border-width:1px

   对浏览器要求较高，兼容性差些，有可能出现粗细不均瑕疵，适合描多边

CSS方式：

1. border 1px：

   1px

   border:#080 1px solid

   通常失效

2. border thin：

   1px

   border:#080 thin solid

   通常失效，期望有这种简单实现

3. backgroud-color：

   height:1px; background-color:#080

   通常失效

4. box-shadow：

   1px

   1px

   box-shadow:#080 0 0 1px; 
   box-shadow:#080 0 0 1px inset

   一种近似的模拟，不受圆角影响，可以尝试

5. backgroud-image + linear gradient：

   1px

   background:linear-gradient(#080, #080 50%, transparent 50%, transparent);
   background-repeat:no-repeat;
   background-size:100% 1px

   1px

   background: linear-gradient(#080, #080 50%, transparent 50%, transparent), linear-gradient(90deg,
               transparent, transparent 50%, #080 50%, #080), linear-gradient(transparent, transparent 50%, #080 50%,
               #080), linear-gradient(90deg, #080, #080 50%, transparent 50%, transparent); 
   background-repeat:no-repeat;
   background-position:top,right,bottom,left; background-size:100% 1px, 1px 100%, 100% 1px, 1px 100%;

   推荐使用，比较灵活，代码稍多，适合多边

6. transform scale + background-color + pesudo element:

   1px

   .pes { position:relative}
   .pes::before { width:200%; height:1px; content:''; background:#090; position:absolute; top:0; left:0;
   transform:scale(.5); transform-origin:0 0}

   推荐使用，比较灵活