移动端1px 边框完整方案（四个方向）

Posted 2020-10-14

使用stylus(预处理)

需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色

$border1px(face,$color)

根据传入的方向属性，调整其他参数

l  左右方向

t  垂直方向

w 上下出现边框则为width反之为height（边框在方向上的长度）

b 上出现边框则为bottom  

x 为哪个方向上的缩放  

具体对应关系如下

  face==top    && (l=left  t=top b=bottom w=width  x=scaleY)
  face==bottom && (l=left  b=top t=bottom w=width  x=scaleY)
  face==left   && (l=left  t=top b=right  w=height x=scaleX)
  face==right  && (l=right t=top b=left   w=height x=scaleX)

下面是边框

  .border-1px {
    position relative
  }
  .border-1px::after {
    display block
    position absolute
    {l} 0
    {t} 0
    {w} 100%
    border-{b} 1px solid $color
    content ‘ ‘
  }

媒体查询

这里需要使用字符串拼接 写成x(0.7)  x将不会赋值

  @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) {
    .border-1px::after {
      -webkit-transform x+‘(0.7)‘
      transform x+‘(0.7)‘
    }
  }
  @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) {
    .border-1px::after {
      -webkit-transform x+‘(0.5)‘
      transform x+‘(0.5)‘
    }
  }

html

  <div class="product">
    <div class="border-1px">
      <p>111</p>
      <p>111</p>
      <p>111</p>
      <p>111</p>
    </div>
  </div>

css

<style scoped lang="stylus">
@import ‘../common/css/index‘
.product
  $border1px(top,red)
  border-bottom 1px solid red
</style>

效果图

完整代码

 1 $border1px(face,$color)
 2   face==top    && (l=left  t=top b=bottom w=width  x=scaleY)
 3   face==bottom && (l=left  b=top t=bottom w=width  x=scaleY)
 4   face==left   && (l=left  t=top b=right  w=height x=scaleX)
 5   face==right  && (l=right t=top b=left   w=height x=scaleX)
 6   .border-1px {
 7     position relative
 8   }
 9   .border-1px::after {
10     display block
11     position absolute
12     {l} 0
13     {t} 0
14     {w} 100%
15     border-{b} 1px solid $color
16     content ‘ ‘
17   }
18   @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) {
19     .border-1px::after {
20       -webkit-transform x(0.7)
21       transform x+‘(0.7)‘
22     }
23   }
24   @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) {
25     .border-1px::after {
26       -webkit-transform x+‘(0.5)‘
27       transform x+‘(0.5)‘
28     }
29   }