使用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   }

移動端1px 邊框完整方案（四個方向）