css 解决android/ios 0.5px的线条问题

341 阅读1分钟
  • 需求:h5开发的div 业务需求是底部添加0.5px的底纹
  • 问题:android不现实0.5px
  • 解决方案: 通过定位+伪类+缩放 实现

image.png

` .line { position: relative;

&:after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid $color-border; transform: scaleY(0.5); transform-origin: 0 100%;
}

&.line-transparent { &:after { border-bottom: 1px solid transparent; } } } `