常用封装

1.边框

边框涉及1物理像素的问题，需要根据媒体查询进行相应的配置

.border-bottom{
            position: relative;
        }
        @media screen and (-webkit-device-pixel-ratio:1){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(1);
            }
        }
        @media screen and (-webkit-device-pixel-ratio:2){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(0.5);
            }
        }
        @media screen and (-webkit-device-pixel-ratio:3){
            .border-bottom::after{
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(0.33);
            }
        }

标签：box,16px,常用,封装,bottom,webkit,position,border
来源： https://www.cnblogs.com/OrochiZ-/p/15761862.html