带背景图片的圆角父元素边缘黑角问题求解决方案

尝试为带背景图的元素添加圆角边框，代码如下：

<ol class="p-5 bg-gray-200">
  <li class="rounded-lg relative overflow-hidden mb-2">
      <a href="#"
          class="items-center relative z-10 flex p-3 bg-gradient-to-r from-gray-200">
          <div class="text-gray-800">
              <div class="text-base font-normal">
                  Hello World
              </div>
          </div>
      </a>
      <img class="absolute top-0 object-cover w-full h-full" src="https://picsum.photos/seed/2/1920/1080/">
</ol>

元素边缘出现黑角（黑角情况取决于图片本身），移除object-cover w-full h-full可消除黑角，但小屏幕下图片会缩小并露出灰色背景，希望找到既能保留图片显示效果又解决黑角的方法。

给图片添加与父元素<li>一致的圆角类rounded-lg，让图片自身带有圆角，配合父元素的overflow-hidden即可解决黑角问题，同时保留图片的缩放效果：

<ol class="p-5 bg-gray-200">
  <li class="rounded-lg relative overflow-hidden mb-2">
      <a href="#"
          class="items-center relative z-10 flex p-3 bg-gradient-to-r from-gray-200">
          <div class="text-gray-800">
              <div class="text-base font-normal">
                  Hello World
              </div>
          </div>
      </a>
      <img class="absolute top-0 object-cover w-full h-full rounded-lg" src="https://picsum.photos/seed/2/1920/1080/">
  </li>
</ol>

原理 #

父元素的overflow-hidden理论上会裁剪超出圆角的内容，但部分浏览器处理object-cover缩放的图片时，可能出现边缘像素溢出的渲染问题。给图片设置相同圆角后，图片边缘与父元素圆角完全对齐，避免了溢出的深色像素显示为黑角。

如果上述方法无效，还可以尝试给图片添加isolate类（对应CSS的isolation: isolate），强制图片与父元素的渲染上下文隔离，进一步解决叠加渲染的问题。

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