1像素border

1像素border 利用伪类和媒体查询：

伪类： 

border-1px($color)
  position:relative 
  &:after
    display: block
    position: absolute
    left: 0 
    bottom: 0 
    width: 100% 
    border-bottom: 1px solid $color 
    content: ' '
  &:before
    display: block
    position: absolute
    left: 0 
    top: 0 
    width: 100% 
    border-top: 1px solid $color 
    content: ' '

媒体查询  定义全局样式border-1px

@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)
    &::before
     -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)
   &::before
     -webkit-transform: scaleY(0.5)
     transform: scaleY(0.5)

 

转载于:https://www.cnblogs.com/qwert1/p/8781126.html