CSS：将“边界半径50％”向上移动2px？

Question

我有以下圆形图标，我用styled-components设置了样式：

const RoundIcon = styled.span`
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: blue;
`

然后我在一些文本的旁边居中显示此圆形图标，如下所示：

<Box>
  <RoundIcon />
  <p style={{ display: 'inline-block', marginLeft: '10px' }}>Hello</p>
</Box>

我喜欢这个，但是我现在想将图标向上移动一两个像素。我不确定如何在不移动旁边的情况下执行此操作？

Answer 1

添加到您的RoundIcon定义 转换：translateY（-2px）;