【HTML】1px边框与1px分割线

对比图

• 箭头标注的是处理过的
  

---

1px分割线

• 使用transform的scaleY进行缩小

码

 <div class="mini-heriz"></div>
 <br>
 <div style="border: solid 1px black; width: 300px;height: 1px;"></div>
<style>
.mini-heriz {
  width: 300px;
  position: relative;
  height: 1px;
}

.mini-heriz::before{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  content: '';
  transform: scaleY(.5);
}
</style>

---

---

---

1px边框

• 宽高设为父元素的200%

  • width: 200%
  • height: 200%

• 利用伪元素before或after进行绘制边框

• 使用transform: scale(0.5)缩小一半

• 最后使用transform-origin: left top设置缩放位置

  • left x轴沿左边开始缩放
  • top y轴沿顶部缩放

 <div class="mini-border"></div>
 <br />
 <div style="border: solid 1px black; width: 100px; height: 100px;border-radius: 5px;"></div>

<style>
.mini-border {
  position: relative;
  width: 100px;
  height: 100px;
}

.mini-border::before {
  border-radius: 5px;
  border: solid 1px black;
  width: 200%;
  height: 200%;
  content: "";
  left: 0;
  top: 0;
  transform-origin: left top;
  position: absolute;
  transform: scale(0.5);
}
</style>

---

End

2024/3/12 16:56