border 1像素问题处理

可以使用svg处理，也可以使用伪元素处理，这里偷学了伪元素的处理方案

html:

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="./index.css" />  
    </head> 
    <body> 
        <div class="retina-border">retina border</div>
        <br />   
        <div class="normal-border">normal border</div> 
    </body>
</html>

css:

.retina-border {
    position: relative;
}
.retina-border::before {
    content: '';  
    position: absolute;
    width: 100%;
    height: 100%; 
    transform-origin: left top;
    box-sizing: border-box;
    pointer-events: none; 
    border-width: 1px;
    border-style: solid;
    border-color: #333;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {  .retina-border::before {   
    width: 200%; 
    height: 200%; 
    transform: scale(0.5); 
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {  .retina-border::before {  
    width: 300%; 
    height: 300%;   
    transform: scale(0.33);
    }
}
.normal-border { 
    border: 1px solid #333;
}

 

posted @ 2020-09-23 13:59  超哥20  阅读(222)  评论(0)  编辑  收藏  举报