移动端1px边框

雨点打透心脏的1/2处 2022-01-29 03:13 201阅读 0赞

# 移动端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%;
        }
    }