如何用CSS将图片四角改为半圆？能否单图实现（React场景）

能否仅用CSS+单张图片实现？ #

完全可以，不需要额外资源，仅靠CSS的border-radius属性就能实现将图片的方形角改为半圆的效果。

实现方法 #

要让图片的四个方形角变成半圆，核心是设置正确的border-radius值：

• 若为正方形图片：将border-radius设为50%（或图片边长的一半，比如400px边长就设为200px），此时四个角会完美形成半圆，整体呈现圆形。
• 若为矩形图片：将border-radius设为图片短边长度的一半，这样四个角都会是标准的半圆。

修改后的React代码示例 #

import React from "react"; // 注意React首字母需大写

const App = () => {
  return (
    <>
      <img
        src="https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
        alt="hello"
        width="400px"
        height="400px"
        style={{
          borderRadius: "50%", // 用50%适配正方形，自动计算为边长的一半
          // 也可写为 borderRadius: "200px"，和50%效果一致
        }}
      />
    </>
  );
};

export default App;

原理说明 #

CSS的border-radius属性用于定义元素的圆角弧度，当取值为元素短边长度的50%时，每个角的圆弧半径刚好等于短边的一半，自然形成半圆角。这个属性直接作用于<img>元素，不需要对原图进行任何修改，完全符合“单张图片+CSS”的要求。

内容的提问来源于stack exchange，提问作者MeAtWork