常用封装

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);
            }
        }
上一篇:vertical-align属性应用


下一篇:创意卡片设计(纯css)