可以使用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 { 200%; height: 200%; transform: scale(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .retina-border::before { 300%; height: 300%; transform: scale(0.33); } } .normal-border { border: 1px solid #333; }