如何使用CSS和Tailwind实现指定圆角形状的图片？

方案1：CSS border-radius 多值语法（推荐，兼容性好） #

这是实现不对称圆角最直接的方式，通过给四个角设置不同的圆角半径即可，配合Tailwind可以灵活实现：

写法一：内联样式快速实现

<img src="你的图片地址" class="w-64 h-64 object-cover" style="border-radius: 80px 10px 80px 10px;" />

border-radius的数值顺序为：左上角 → 右上角 → 右下角 → 左下角，你可以根据图中实际圆角大小调整数值。

写法二：自定义Tailwind工具类（规范项目推荐）

先在tailwind.config.js中扩展自定义圆角：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'custom-round': '80px 10px 80px 10px', // 对应图中的圆角比例
      },
    },
  },
}

之后直接在HTML中使用：

<img src="你的图片地址" class="w-64 h-64 object-cover rounded-custom-round" />

方案2：clip-path 实现复杂自定义形状 #

如果你的圆角是非标准圆弧（比如椭圆角或特殊曲线），可以用clip-path裁剪出形状，需要配合Tailwind的clip-path插件：

1. 先安装插件：

npm install tailwindcss-clip-path

2. 在tailwind.config.js中配置自定义路径：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      clipPath: {
        'custom-shape': 'path("M80,0 H0 V80 C0,44.77 28.77,16 64,16 H256 C291.23,16 320,44.77 320,80 V256 C320,291.23 291.23,320 256,320 H80 C44.77,320 16,291.23 16,256 V64 C16,28.77 44.77,0 80,0 Z")',
      },
    },
  },
  plugins: [require('tailwindcss-clip-path')],
}

3. 在HTML中使用：

<img src="你的图片地址" class="w-64 h-64 object-cover clip-path-custom-shape" />

你可以通过可视化工具调整路径代码，匹配需求的形状。

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