我是通过伪元素来设置的，以下为CSS样式

单边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.border-1px(@top:auto,@bottom:auto,@left:auto,@right:auto){
    &:before{
        content: '';
        position: absolute;
        top: @top;
        bottom: @bottom;
        left: @left;
        right: @right;
        background: #E7E7E7;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}

删除单边

通常用于列表删除第一个或者最后一个边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.border-1px-del-bottom{
    &:last-child{
        &:before{
            height: 0;
        }
    }
}
.border-1px-del-top {
    &:first-child{
        &:before{
            height: 0;
        }
    }
}

四边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.border-1px-radius(@br:none,@bg:none){
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #979797;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5) translate3d(0,0,0);
        transform: scale(0.5) translate3d(0,0,0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        border-radius: @br;
        background:@bg;
    }
}

更多方法

css
← Prev Next →