嗨，我来帮你看看问题出在哪儿！你尝试的两种方式其实都有可以调整的地方，咱们一步步来拆解：

第一种方案（Next.js Image组件）的问题分析 #

你用Next.js Image组件时，虽然给父容器加了relative和rounded-2xl，也给Image加了rounded-2xl，但遗漏了一个关键属性：父容器需要加上overflow:hidden。

因为fill属性会让Image组件以绝对定位的方式占满父容器，这时候即使Image本身有圆角，它的内容如果超出父容器的圆角区域，父容器没有裁剪的话，直角部分还是会露出来。而且其实你不需要给Image组件本身加rounded-2xl——只要父容器设置rounded-2xl + overflow:hidden，再配合Image的fill和object-contain就可以了。

修正后的代码片段大概是这样：

<div className="w-full h-200 bg-[url('/home/hero7.jpg')] bg-cover bg-center bg-no-repeat border-b-4 border-dark-grey px-50 flex items-center justify-between gap-15">
  <div className="w-1/2 flex flex-col gap-6">
    ...
  </div>
  <div className="w-1/2 relative py-70 rounded-2xl overflow-hidden">
    <Image 
      src="/home/p1.jpeg" 
      alt="xD" 
      fill 
      className="object-contain" 
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw" 
    />
  </div>
</div>

这里的关键改动是给父容器加了overflow:hidden，同时可以去掉Image组件上的rounded-2xl——因为父容器的圆角加上裁剪，已经能让图片显示圆角了。

第二种方案（背景图方式）的问题分析 #

你用背景图的方式时，问题可能出在两个地方：

1. py-70的单位问题：Tailwind默认的spacing体系里没有py-70这个值（默认是基于rem的，py-70会被解析成上下内边距各70rem，这尺寸大到离谱），这会让元素高度异常，圆角可能被“撑”得完全看不见，或者元素直接超出视口范围。你应该用合理的高度值，比如h-[300px]（可根据你的设计需求调整），而不是靠内边距来撑高度。
2. overflow:hidden与rounded-2xl的配合问题：你把overflow:hidden加在了最外层的w-1/2容器上，但里面的子元素才是背景图载体，正确的做法是让带overflow:hidden的容器同时拥有rounded-2xl，这样它内部的背景图会被圆角裁剪。

修正后的第二种方案代码可以这样写：

<div className="w-full h-200 bg-[url('/home/hero7.jpg')] bg-cover bg-center bg-no-repeat border-b-4 border-dark-grey px-50 flex items-center justify-between gap-15">
  <div className="w-1/2 flex flex-col gap-6">
    ...
  </div>
  <div className="w-1/2 overflow-hidden rounded-2xl">
    <div 
      className="bg-[url('/home/p1.jpeg')] bg-contain bg-center bg-no-repeat h-[300px]"
    ></div>
  </div>
</div>

通用的圆角生效注意事项 #

最后给你几个通用的小提醒，避免以后再踩类似的坑：

1. 绝对定位元素（比如用fill的Image）：必须让它的相对定位父容器同时设置rounded-*和overflow:hidden——因为绝对定位元素脱离了文档流，只有父容器的裁剪才能让圆角生效。
2. 背景图/普通图片：如果直接给元素加rounded-*没效果，先检查元素尺寸是否合理，有没有内容超出；必要时给父容器加overflow:hidden来配合裁剪。
3. 自定义Tailwind值：如果需要用非默认的尺寸，记得用括号包裹自定义值，比如py-[70px]而不是py-70（除非你已经在tailwind.config.js里配置了对应的spacing值）。

内容来源于stack exchange