如何使用 TailwindCSS 使 iframe 的边缘变圆？ [复制]答案

【问题标题】：How can I round edges of an iframe with TailwindCSS? [duplicate]如何使用 TailwindCSS 使 iframe 的边缘变圆？ [复制]
【发布时间】：2022-09-23 03:59:43
【问题描述】：

我遵循了本指南https://www.themes.dev/blog/easily-embed-responsive-youtube-video-with-tailwind-css/

   <div className=\"aspect-w-16 aspect-h-9 rounded-lg bg-red-800\">
      <iframe
        src=\"https://www.youtube.com/embed/r9jwGansp1E\"
        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"
        allowFullScreen
      ></iframe>
    </div>

我似乎无法使边缘变圆，或者这不可能吗？

标签： css reactjs tailwind-css

【解决方案1】：

您需要将类添加到 iframe 本身：

<div className="aspect-w-16 aspect-h-9 bg-red-800">
  <iframe
    className="rounded-lg"
    src="https://www.youtube.com/embed/r9jwGansp1E"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>

【讨论】：