content: "";
position: absolute;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border: solid 1px red;
border-radius: 22px;
box-sizing:border-box;
}
</style>
0.5px左边线
<div class="left">
<div class="left-div">
HELLO WORLD
</div>
</div>
<style>
.left{
position: relative;
font-size: 16px;
}
.left .left-div:before{
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 1px;
height: 100%;
border-left: 1px solid red;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
</style>0.5px右边线
<div class="right">
<div class="right-div">
HELLO WORLD
</div>
</div>
<style>
.right{
position: relative;
font-size: 16px;
display: inline-block;
}
.right .right-div:before{
content: " ";
position: absolute;
right: 0;
bottom: 0;
width: 1px;
height: 100%;
border-right: 1px solid red;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
</style>0.5px底部线
<div class="bottom">
<div class="bottom-div">
HELLO WORLD
</div>
</div>
<style>
.bottom{
position: relative;
font-size: 16px;
}
.bottom .bottom-div:before{
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-top: 1px solid red;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
</style>
