【CSS】1 像素问题

0.5 px 同理。

CSS 中的 1 像素问题指的是在⾼分辨率屏幕上显示的 1 像素边框或者细线在实际显示时会⽐ 1 个物理像素更宽或更粗，从⽽导致边框或者细线看上去⽐预期的更粗或者更宽。

造成这个问题的原因是由于⾼分辨率屏幕的像素密度⽐传统的屏幕要⾼，所以在屏幕上显示的⼀个 CSS 像素对应的物理像素个数也会相应地增多，当使⽤ CSS 中的 1px 来设置边框或者细线时，实际上渲染出来的线条在屏幕上会被拆分为多个物理像素，从⽽导致看上去更粗。

1. 使⽤图⽚代替边框或细线，这种⽅法能够保证显示效果的⼀致性，但是需要制作多张图⽚，增加了⻚⾯加载的开销。

2. 使⽤ scale 进⾏缩放，使⽤ transform 缩放 0.5 像素⼤⼩的边框，以达到渲染 1 像素的效果。例如：

   .border {
   	 position: relative;
   	 border: 1px solid #000;
   }
   .border:after {
   	 content: "";
   	 position: absolute;
   	 top: -1px;
   	 left: -1px;
   	 right: -1px;
   	 bottom: -1px;
   	 border: 1px solid #000;
   	 transform: scale(0.5);
   }
   

3. 使⽤ border-image，border-image 可以实现将⼀张图⽚作为边框样式，图⽚会⾃动拉伸或者重复以填充边框。这种⽅法需要制作⼀张边框的图⽚，但是可以通过 CSS 控制图⽚的填充⽅式和边框样式，⽐较灵活。例如：

    .border {
       border: 1px solid transparent;
       border-image: url(border.png) 1 1 stretch;
    }
   

4. 使⽤ CSS3 的 box-shadow，可以⽤ box-shadow 属性来模拟边框。例如：

   .border {
     box-shadow: 0 0 0 1px #000;
    }
   

5. 使用 rem 。按照比例呈现 1px 。

6. 背景图 background-image 。

   .line {
     width: 100%;
     height: 1px;
     background-image: linear-gradient(to right, black 50%, transparent 50%);
     background-size: 2px 1px;
   }
   

7. svg 线条：直接在 HTML 中放入一个 SVG 标签，设置线条的 strokeWidth 为 0.5。

   <svg width="100%" height="1">
     <line x1="0" y1="0" x2="100%" y2="0" style="stroke:black;stroke-width:0.5" />
   </svg>
   

使⽤ viewport，在 head 中添加如下代码可以解决 1px 问题：

<meta name="viewport" content="width=device-width,initial
scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">