[分享]css中1px边框

网页设计中，我们常常需要给一些元素加上边框来达到分隔或者美化的目的，但是有些时候我们发现使用普通的border属性添加的边框可能会出现模糊或者虚化的情况，尤其是在高清屏幕上。这时候就需要用到CSS的一...

网页设计中，我们常常需要给一些元素加上边框来达到分隔或者美化的目的，但是有些时候我们发现使用普通的border属性添加的边框可能会出现模糊或者虚化的情况，尤其是在高清屏幕上。这时候就需要用到CSS的一个技巧，那就是1px边框。

 .element{
    border: 1px solid #000;
    transform: scale(1);
  } 

这里我们可以看到使用的是普通的border属性，但是加上了一个scale(1)的变形属性，这就能让边框在高清屏幕上显示得更加清晰了。

但是有时候，即使使用了scale(1)，我们还是会发现边框有轻微的模糊或虚化。这是因为边框的宽度单位是像素（px），而有些屏幕的物理像素密度比较高，比如Retina屏幕，一个CSS像素点包含有多个物理像素点，所以没有精确的1px边框。

为了解决这个问题，我们可以使用伪类元素:before或:after，将它们的宽度设为0.5px，然后通过变形将它们放大2倍，这样就能得到较为精细的1px边框效果了。

 .element{
    position: relative;
    border: none;
  }
  
  .element:before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    border: 0.5px solid #000;
    transform-origin: left top;
    transform: scale(0.5, 0.5);
  } 

这里我们先将原有的边框设为none，然后在伪类元素:before中添加了一个0.5px的边框，再使用transform将它缩小了一半，并将变形的原点设置为左上角，最后就得到了高清晰度的1px边框了。

当然，在一些新的CSS规范中，也引入了更为便捷的1px边框实现方式，但是以上这些方法能够轻松解决在老旧浏览器中1px边框的问题。