嵌入YouTube的Iframe设置Border-Radius后四角出现细线求助

问题情况 #

使用Material UI的CardMedia组件渲染嵌入YouTube链接的Iframe时，设置border-radius:30px实现圆角效果后，四角出现了无法通过border-width:0、修改边框颜色消除的细线。该问题主要出现在Windows系统的浏览器中，Mac平台下Chrome和Safari正常，但Firefox也会出现此问题。

当前给CardMedia组件通过sx属性设置的样式：

cardContainer: {
    height: '360px',
    maxWidth: '640px',
    borderRadius: '30px',
    webkitBorderRadius: '30px',
    mozBorderRadius: '30px',
    borderWidth: '0',
}

原生HTML+CSS的简化复现示例：

CSS #

.custom {
    height: 360px;
    width: 640px;
    border-radius: 30px;
    border-width: 0;
}

HTML #

<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe class="custom" src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves"></iframe>
</body>
</html>

解决方法 #

方法一：用父容器裁剪圆角（最可靠） #

Iframe内部的YouTube播放器可能自带细微的边框或背景，直接给Iframe加圆角会导致这些内容露出。通过给Iframe套一层父容器，由父容器设置圆角并裁剪溢出内容，就能彻底解决问题：

Material UI场景代码调整

import { Box, CardMedia } from '@mui/material';

// 用Box作为容器包裹CardMedia
<Box sx={{
  borderRadius: '30px',
  overflow: 'hidden',
  height: '360px',
  maxWidth: '640px',
}}>
  <CardMedia
    component="iframe"
    src="你的YouTube嵌入链接"
    sx={{
      width: '100%',
      height: '100%',
      border: 'none', // 确保Iframe无默认边框
    }}
  />
</Box>

原生HTML场景代码调整

<div style="border-radius: 30px; overflow: hidden; height: 360px; width: 640px;">
  <iframe 
    src="https://www.youtube.com/embed/OtVUZGhAHBc" 
    title="lines on Iframe curves"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

方法二：清除Iframe的默认轮廓和阴影 #

部分浏览器可能给Iframe添加了默认的outline或阴影，尝试添加以下样式消除：

.custom {
    height: 360px;
    width: 640px;
    border-radius: 30px;
    border: none;
    outline: none;
    box-shadow: none;
}

方法三：统一Iframe与父容器背景色 #

如果细线是因为Iframe内部背景与外部容器背景不一致导致的，给Iframe设置和父元素相同的背景色：

.custom {
    /* 已有样式 */
    background-color: #ffffff; /* 替换为你的父容器背景色 */
}

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