众所周知在移动端写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
}
},
看看对比图,在移动端效果很明显: