微信小程序1像素横线手机上变粗

最新推荐文章于 2022-12-05 11:56:06 发布

huycheaven

最新推荐文章于 2022-12-05 11:56:06 发布

阅读量6k

点赞数 1

分类专栏：微信小程序文章标签：小程序 1像素横线

本文链接：https://blog.csdn.net/huyuchaoheaven/article/details/79567277

版权

微信小程序专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1，缩放y轴的高度

采用的是缩放y轴的高度，所以要注意界面布局，有可能会有你想不到的效果
.h_line{
  height: 1px;
  border: none;
  border-bottom: 1px solid #c5c5c5;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

使用的时候 class = "border-t border-b "

.border-t, .border-b {
  position: relative;
}

.border-t::after, .border-b::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: var(--color-ch);
  transform: rotateX(60deg);
  -ms-transform: rotateX(60deg);
  -moz-transform: rotateX(60deg);
  -webkit-transform: rotateX(60deg);
  -o-transform: rotateX(60deg);
}

.border-t::after {
  top: 0;
}

.border-b::after {
  bottom: 0;
}