vue中移动端真实1px边框实现（仿饿了么）

 用了stylus写法

border-1px

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

// 无边框
border-none()
  &:after
    display none

要注意一点，需要在添加样式的元素里添加class: 'border-1px'

 

<span class="text border-1px">
      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>            
      {{item.name}}
</span>

.text{
    border-1px(red);
}

 

然后可以完美实现1px的border了