如何在Flutter中为图片添加圆角和倒圆角效果

下面给你两种实用的实现方案，按需选择：

方法一：用CSS clip-path 直接裁剪 #

这种方式通过定义裁剪路径一步到位，代码简洁：

/* 容器控制尺寸 */
.image-box {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 自定义四个角：左上圆角、右上倒圆角、右下圆角、左下倒圆角 */
  clip-path: polygon(
    20px 0,
    100% 20px,
    calc(100% - 20px) 100%,
    0 calc(100% - 20px)
  );
}

把代码里的20px换成你需要的圆角半径就行，坐标可以灵活调整，实现任意角的凸凹组合。

方法二：伪元素叠加模拟（兼容更好） #

如果要兼容旧浏览器，或者需要配合阴影、边框等效果，用伪元素叠加更灵活：

.image-box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  /* 先给容器加普通圆角（对应需要外凸的角） */
  border-radius: 20px;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右上角倒圆角：用同背景色的小方块+反向圆角覆盖 */
.image-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #fff; /* 这里要和容器的背景色一致 */
  border-bottom-left-radius: 20px;
}
/* 左下角倒圆角 */
.image-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: #fff;
  border-top-right-radius: 20px;
}

原理是先给容器加外凸圆角，再用伪元素在需要内凹的角上放一个和背景同色的小方块，给方块加反向圆角，看起来就像是内凹了。

注意事项 #

• 图片一定要加object-fit: cover，避免拉伸变形；
• clip-path在现代浏览器支持很好，但IE不兼容，优先用伪元素方法做兼容；
• 两种方法都可以调整参数，实现任意角的凸凹组合。

内容的提问来源于stack exchange，提问作者Gábor