网站首页HTML/CSS
使用媒体查询实现1px边框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @media (-webkit-min-device-pixel-ratio: 1),(min-resolution: 1dppx) {
            :root {
                --border-1px: 1px;
                --border-color: #f00
            }
        }

        @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
            :root {
                --border-1px: 0.5px;
                --border-color: #0f0
            }
        }

        @media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
            :root {
                --border-1px: 0.33333px;
                --border-color: #00f
            }
        }

        @media (-webkit-min-device-pixel-ratio: 4),(min-resolution: 4dppx) {
            :root {
                --border-1px: 0.25px;
                --border-color: #ff0
            }
        }

        .demo {
            background: 0 0;
            border: var(--border-1px) solid var(--border-color);
            padding: 25px 50px
        }
    </style>
    <title>1px</title>
</head>
<body>
<button class="demo">提交</button>
</body>
</html>