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

时间 2019-11-08

标签移动 1px 边框完整方案四个方向栏目无线繁體版

原文原文链接

使用stylus(预处理)css

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

$border1px(face,$color)

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

l 左右方向函数

t 垂直方向spa

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

b 上出现边框则为bottom orm

x 为哪一个方向上的缩放 htm

具体对应关系以下blog

  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   }