<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>0.5px边框实现</title> <style> .btn { position: relative; width: 100px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #ededed; } .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; } </style> </head> <body> <div class="btn"></div> </body> </html>