Question

我知道为此必须使用border-radius: 50%，但对于我来说似乎不起作用。

我正在使用React / JSX表示法，这是图标：

<i style={{ borderRadius: '50%' }} className="big cc visa icon" />

不幸的是，style不能像我期望的那样裁剪图像。有可能解决这个问题吗？

Answer 1

这似乎更多是CSS问题，而不是反应问题。

该元素默认设置为display: inline。要更改此设置，您需要将其设置为display: block并定义宽度和高度。要进行内联反应，您可以使用类似以下的方法：

      <i
        style={{
          borderRadius: "50%",
          width: 50,
          height: 50,
          background: "red",
          display: "block"
        }}
        className="big cc visa icon"
      />

这是一个有效的示例：https://codesandbox.io/s/delicate-https-9q50j?file=/src/App.js

Answer 2

确保您的i显示块具有CSS属性和大小。然后，您可以使用边界半径进行裁剪。内部图像的位置和大小，您可以通过背景大小调整和其他属性进行管理。

以下是codeandbox中的示例：https://codesandbox.io/s/eager-lichterman-9rwmh？

裁剪图像使其成为圆形

2 个答案: