我知道这样做必须使用border-radiation:50%，但在我的情况下似乎不起作用。
我使用的是React/JSX表示法，这是图标:
<i style={{ borderRadius: '50%' }} className="big cc visa icon" />
不幸的是，style不能像我预期的那样裁剪图像。 这个问题有可能解决吗？
确保您的i具有显示块css属性和大小。 然后你就可以用边框半径进行裁剪了。 图像内部的位置和大小，可以通过背景大小和其他属性进行管理。
下面是CodeSandbox中的示例:https://codeSandbox.io/s/eager-lichterman-9rwmh？
看起来这更像是一个CSS问题，而不是一个react问题。
默认情况下，该元素设置为display:inline。 要更改它，您需要将其设置为display:block，并定义宽度和高度。 要在react中内联执行此操作，可以使用以下内容:
<i
style={{
borderRadius: "50%",
width: 50,
height: 50,
background: "red",
display: "block"
}}
className="big cc visa icon"
/>
下面是一个工作示例:https://codesandbox.io/s/paticult-https-9q50j？file=/src/app.js
