1px边框问题

2016-12-29

摘要：使用transform和伪类解决1px边框问题。将原先元素的border去掉并使用相对定位，然后利用:before或者:after重做border并使用绝对定位，再根据设备像素比devicePixelRatio使用transform的scale进行相应的缩小。如果是单条border，只使用scaleY缩小纵向Y轴即可；如果是四条border的话，使用scale缩小，这时要注意：:after的宽高也会缩小，因此它内容的宽和高要相应放大

单条border

.border-1px {
  position: relative;
  border: none;
}
.border-1px:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid #ccc;
  content: '';      
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px:after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
  }   
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px:after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
  .border-1px:after {
    -webkit-transform: scaleY(0.3334);
    transform: scaleY(0.3334);
  }   
}

四条border

.border-1px {
  position: relative;
  border: none;
}
.border-1px:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  border: 1px solid #ccc;
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
  content: '';
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px:after {
    width: 150%;
    height: 150%;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }   
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }   
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
  .border-1px:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333334);
    transform: scale(0.3333334);
  }   
}

支持圆角：给.border-1px和.border-1px:after都添加上border-radius即可