移动端如何实现1px的细线

发表于 | 分类于

前言

在做移动端项目的时候，我们往往需要设置1px的边框，但是 border-width:1px; 效果出来的边框却往往比1px要粗。本文主要介绍移动端实现1px边框的几种实现方案。

实现方案：

1.多背景渐变

设置1px的渐变背景，50%有颜色，50%透明。。

1
2
3
4
.background-gradient-1px{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
    background-size: 100% 1px;
}

2.box-shadow 模拟边框

1
2
3
4
.box-shadow-1px {
    border: none;
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

3.使用伪类 :before, :after 与 transform

单条 border 样式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.scale-1px{
    position: relative;
    border:none;
}
.scale-1px:after{
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

四条 border 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.scale-1px{
    position: relative;
    margin-bottom: 20px;
    border:none;
}
.scale-1px:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}