移动端1像素边框

发表于 |
字数统计: 377 | 阅读时长 ≈ 2

border-image 图片 实现

1
2
3
4
.border-image-1px {
    border-width: 1px 0;
    -webkit-border-image: url('')
}

缺点 要有图片，圆角会模糊

background-image 渐变实现

1
2
3
4
5
6
7
8
9
10
.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

缺点， 圆角会模糊 优点，不用图片

viewport+rem实现

box-shadow 实现

1
2
3
div{
    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

优点是圆角不是问题，缺点是颜色不好控制。

transform: scale(0.5) 实现 推荐相当灵活

  • 用height：1px的div，然后根据媒体查询设置transform: scaleY(0.5);，

    1
    2
    3
    4
    5
    6
    7
    div{
        height:1px;
        background:#000;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin:0 0;
        overflow: hidden;
    }

  • 用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

    1
    2
    3
    4
    5
    6
    div::after{
        content:'';
        width:100%;
        border-bottom:1px solid #000;
        transform: scaleY(0.5);
        }

  • 用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .div::after {
        content: '';
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        -webkit-transform: scale(0.5,0.5);
        transform: scale(0.5,0.5);
        -webkit-transform-origin: top left;
    }

原文链接 [https://segmentfault.com/a/1190000007604842]