踩坑:移动端实现0.5px的方法

众所周知在移动端写1px边框,显示出来的效果看起来比较粗,而且在不同的移动设备显示效果也千差万别,那么下面介绍一种常见的0.5px 的实现方法。

下面代码可以实现4条边框

 Container: {
    position: 'relative',
    width: '100%',
    height: theme.typography.pxToRem(666),
    padding: theme.typography.pxToRem(15),
    textAlign: 'center',
    borderRadius: 3,
    // border: '1px solid #F2F2F2',
    '&:before': {
      content: '""',
      display: 'block',
      position: 'absolute',
      left: '-50%',
      top: '-50%',
      width: '200%',
      height: '200%',
      border: '1px solid red',
      transform: 'scale(0.5)',
      borderRadius: 3
    }
  },

看看对比图,在移动端效果很明显:
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42224055/article/details/106427462