如何在项目中为图片实现这种边角border-radius效果？

你遇到的问题是父元素设置了border-radius但图片没被裁剪出对应圆角，核心原因是：父元素默认不会裁剪超出自身边界的子元素，所以图片会直接覆盖父元素的圆角样式。

解决方法 #

给父容器添加overflow: hidden属性，强制裁剪超出边界的子元素，图片就会跟着父元素的圆角显示了。

修改后的CSS代码：

.img-section {
    flex: 1;
    padding: 40px;
    position: relative;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden; /* 关键属性：裁剪超出的图片 */
}

.img-form img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

额外说明 #

如果保留padding:40px，图片和圆角之间会有间距；要是想让图片完全贴合圆角，可以去掉父元素的padding，或者调整结构——给图片单独套一层容器，把圆角和overflow:hidden加到这个内层容器上，父元素保留padding即可：

<div class="img-section">
  <div class="img-wrapper">
    <img src="你的图片地址" alt="描述">
  </div>
</div>

.img-section {
    flex: 1;
    padding: 40px;
    position: relative;
}

.img-wrapper {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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