移动端1px边框

最新推荐文章于 2025-02-27 22:51:55 发布

原创最新推荐文章于 2025-02-27 22:51:55 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发 #1px边框

技术分享专栏收录该内容

34 篇文章

订阅专栏

博客聚焦于移动端1px边框相关内容，在移动开发中，1px边框的处理是常见问题，涉及到适配等多方面情况。

移动端1px边框

/*高清屏 1px border*/
.border-1-px, /*1px 边框*/
.border-1-px-radius, /*1px 圆角边框*/
.border-1-px-top, /*1px 上边框*/
.border-1-px-right, /*1px 右边框*/
.border-1-px-bottom, /*1px 下边框*/
.border-1-px-left {  /*1px 左边框*/
    position: relative;
}

.border-1-px:after,
.border-1-px-radius:after{
    pointer-events: none; /*表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西*/
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    z-index: 20;
}

.border-1-px-radius:after{
    border-radius:50%;
}

.border-1-px-top:before,
.border-1-px-bottom:after {
    pointer-events: none;
    position: absolute;
    left: 0;
    content: "";
    width:100%;
    height: 1px;
    background-color: #ddd;
    z-index: 20;
}

.border-1-px-top:before {
    top: 0;
}

.border-1-px-bottom:after {
    bottom: 0;
}

.border-1-px-left:before,
.border-1-px-right:after {
    pointer-events: none;
    position: absolute;
    top: 0;
    content: "";
    width: 1px;
    height:100%;
    background-color: #ddd;
    z-index: 20;
}

.border-1-px-left:before {
    left: 0;
}

.border-1-px-right:after {
    right: 0;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5){
    .border-1-px-top:before,
    .border-1-px-bottom:after {
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }

    .border-1-px-left:before,
    .border-1-px-right:after {
        transform: scaleX(0.5);
        -webkit-transform: scaleX(0.5);
    }

    .border-1-px:after,
    .border-1-px-radius:after{
        width:200%;
        height:200%;
        transform:scale(0.5,0.5);
        -webkit-transform:scale(0.5,0.5);
    }

    .border-1-px-radius:after{
        border-radius:100%;
    }

    .border-1-px-top:before,
    .border-1-px-left:before,
    .border-1-px:after,
    .border-1-px-radius:after{
        /*transform-origin: x-axis y-axis z-axis; 定义视图被置于x轴，y轴，z轴的何处 */
        /*x-axis可能的值：left、center、right、length、%*/
        /*y-axis可能的值：top、center、bottom、length、%*/
        /*z-axis可能的值：length*/
        transform-origin:0 0;
        -webkit-transform-origin: 0 0;
    }

    .border-1-px-bottom:after,
    .border-1-px-right:after{
        transform-origin:100% 100%;
        -webkit-transform-origin: 100% 100%;
    }
}

@media (-webkit-device-pixel-ratio: 1.5),/*todo f */
(device-pixel-ratio: 1.5){
    .border-1-px-top:before,
    .border-1-px-bottom:after {
        transform: scaleY(0.6666);
        -webkit-transform: scaleY(0.6666);
    }

    .border-1-px-left:before,
    .border-1-px-right:after {
        transform: scaleX(0.6666);
        -webkit-transform: scaleX(0.6666);
    }

    .border-1-px:after,
    .border-1-px-radius:after{
        width:150%;
        height:150%;
        transform:scale(0.6666,0.6666);
        -webkit-transform:scale(0.6666,0.6666);
    }

    .border-1-px-radius:after{
        border-radius:75%;
    }
}

@media (-webkit-device-pixel-ratio: 3),
(device-pixel-ratio: 3){
    .border-1-px-top:before,
    .border-1-px-bottom:after {
        transform: scaleY(0.3333);
        -webkit-transform: scaleY(0.3333);
    }

    .border-1-px-left:before,
    .border-1-px-right:after {
        transform: scaleX(0.3333);
        -webkit-transform: scaleX(0.3333);
    }

    .border-1-px:after,
    .border-1-px-radius:after{
        width:300%;
        height:300%;
        transform:scale(0.3333,0.3333);
        -webkit-transform:scale(0.3333,0.3333);
    }

    .border-1-px-radius:after{
        border-radius:150%;
    }
}

@media (-webkit-device-pixel-ratio: 4),
(device-pixel-ratio: 4){
    .border-1-px-top:before,
    .border-1-px-bottom:after {
        transform: scaleY(0.25);
        -webkit-transform: scaleY(0.25);
    }

    .border-1-px-left:before,
    .border-1-px-right:after {
        transform: scaleX(0.25);
        -webkit-transform: scaleX(0.25);
    }

    .border-1-px:after,
    .border-1-px-radio:after{
        width:400%;
        height:400%;
        transform:scale(0.25,0.25);
        -webkit-transform:scale(0.25,0.25);
    }

    .border-1-px-radio:after{
        border-radius:200%;
    }
}