如何在Styled Component中增大虚线边框的间距？

原生CSS的border: 1px dashed无法直接控制线段间距（这是浏览器默认行为），要实现自定义间距的虚线边框，常用两种方案：

方案一：利用CSS背景渐变模拟 #

移除原生虚线边框，通过背景渐变和伪元素实现自定义间距的虚线效果：

const LogoBox = styled(Box)(({ theme }) => ({
  width: '145px',
  height: '145px',
  display: 'flex', 
  borderRadius: '10px',
  marginBottom: '24px',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  backgroundColor: theme.palette.info.main,
  position: 'relative',
  // 水平方向虚线（上下边框）
  backgroundImage: `linear-gradient(to right, ${theme.palette.primary.main} 50%, transparent 50%)`,
  backgroundSize: '8px 1px', // 第一个值=线段长度+间距，第二个值=边框厚度；此处线段4px，间距4px
  backgroundRepeat: 'repeat-x',
  backgroundPosition: '0 0, 0 100%', // 分别定位到顶部和底部
  // 垂直方向虚线（左右边框，通过伪元素实现）
  '&::before': {
    content: '""',
    position: 'absolute',
    inset: 0,
    borderRadius: '10px',
    backgroundImage: `linear-gradient(to bottom, ${theme.palette.primary.main} 50%, transparent 50%)`,
    backgroundSize: '1px 8px', // 控制垂直方向线段和间距
    backgroundRepeat: 'repeat-y',
    backgroundPosition: '0 0, 100% 0', // 分别定位到左侧和右侧
    pointerEvents: 'none', // 不干扰内部元素交互
  },
}));

方案二：用SVG背景实现完美圆角虚线 #

如果需要圆角处的虚线衔接更自然，推荐使用SVG背景，通过stroke-dasharray精确控制线段和间距：

const LogoBox = styled(Box)(({ theme }) => ({
  width: '145px',
  height: '145px',
  display: 'flex', 
  borderRadius: '10px',
  marginBottom: '24px',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  backgroundColor: theme.palette.info.main,
  // SVG背景模拟带圆角的自定义虚线
  backgroundImage: `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='10' ry='10' fill='none' stroke='${encodeURIComponent(theme.palette.primary.main)}' stroke-width='1' stroke-dasharray='8 4'/%3E%3C/svg%3E")`,
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
}));

参数说明 #

• 渐变方案中，backgroundSize的第一个数值越大，线段间距越大；调整百分比（比如把50%改成30%）可以改变线段长度占比。
• SVG方案中，stroke-dasharray='8 4'代表8px长的线段，间隔4px，直接修改这两个数值即可调整间距。

内容的提问来源于stack exchange，提问作者Muhammad Nurul Ahsan