CSS实现0.5px的线 && 0.5rpxborder边框

革履西装

已于 2022-08-04 23:57:09 修改

阅读量628

点赞数

文章标签： css html 前端

于 2022-08-04 22:23:23 首次发布

本文链接：https://blog.csdn.net/weixin_53641562/article/details/126167757

版权

1、0.5px的线

核心代码就是通过transfrom的scaleY属性，溢出隐藏掉就可以了

// html
<div class="line"></div>
<div style="height:100px;width:100px"></div>
<div class="line-copy"></div>

//css
.line {
  width: 1000px;
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
  overflow: hidden;
}
.line-copy {
  width: 1000px;
  height: 1px;
  background: #000;
}

2、微信小程序0.5rpx边框

// css样式
.line_box {
  position: relative;
  width: 690rpx;
  height: 50rpx;
}

.line_box::after {
  position: absolute;
  top: 0;
  left: 0;
  content: " ";
  width: 100%;
  height: 1rpx;
  border-top: 1px solid #dedede;
  transform: scaleY(.5);
}