Skip to content

0.5px

线

html
<style>
  .line {
    height: 1px;
    background-color: black;
  }
  .scale-half {
    transform: scaleY(0.5);
    transform-origin: 50% 100%;
  }
</style>

<p>1px + scaleY(0.5)</p>
<div class="line scale-half"></div>
<p>0.5px</p>
<div class="line" style="height: 0.5px"></div>
<p>1px</p>
<div class="line"></div>

正方形

html
<style>
  .box {
    position: relative;
    width: 100px;
    height: 100px;
  }
  .box::after {
    content: '';
    position: absolute;
    border: 1px solid black;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: top left;
    box-sizing: border-box;
  }
</style>

<div class="box"></div>
<div class="box" style="border: 1px solid black;"></div>