原理: css3 的缩放 ----> transform: scale()
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
margin: 50px auto;
position: relative;
/*background: #f4f4f4;*/
}
.box::after {
content: '';
position: absolute;
left: ;
top: ;
width: %;
height:%;
border:1px solid #;
-webkit-transform-origin: ;
transform-origin: ;
-webkit-transform: scale(., .);
transform: scale(., .);
-webkit-transform: scale(., .);
-ms-transform: scale(., .);
z-index: ;
}
.bd-t::after {
content: "";
position: absolute;
top: ;
left: ;
width: %;
border-top: 1px solid #;
transform: scaleY(.);
-webkit-transform: scaleY(.);
-ms-transform: scaleY(.);
}
.bd-l::after {
content: "";
position: absolute;
top: ;
left: ;
height: %;
border-left: 1px solid #;
transform: scaleX(.);
-webkit-transform: scaleX(.);
-ms-transform: scaleX(.);
}
.box1 {
height: 200px;
width: 200px;
margin: 50px auto;
position: relative;
border: 1px solid #;
/*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>