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

视觉CG2024-03-12 18:30

对比图

箭头标注的是处理过的

1px分割线

使用transform的scaleY进行缩小

码

html 复制代码

 <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轴沿顶部缩放

html 复制代码

 <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