【避坑指“难”】移动端实现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
    }
  },

看看对比图，在移动端效果很明显：