原理: css3 的缩放 ----> transform: scale()
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; 200px; margin: 50px auto; position: relative; /*background: #f4f4f4;*/ } .box::after { content: ''; position: absolute; left: 0; top: 0; 200%; height:200%; border:1px solid #000000; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); -webkit-transform: scale(.5, .5); -ms-transform: scale(.5, .5); z-index: 1; } .bd-t::after { content: ""; position: absolute; top: 0; left: 0; 100%; border-top: 1px solid #000; transform: scaleY(.5); -webkit-transform: scaleY(.5); -ms-transform: scaleY(.5); } .bd-l::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 1px solid #000; transform: scaleX(.5); -webkit-transform: scaleX(.5); -ms-transform: scaleX(.5); } .box1 { height: 200px; 200px; margin: 50px auto; position: relative; border: 1px solid #000; /*background: #09f;*/ } </style> </head> <body> <div class="box"> 四条边框0.5px </div> <div class="bd-t"> 顶部边框0.5px </div> <div class="bd-l"> 左边框0.5px </div> <div class="box1">参考相</div> </body> </html>