Css 应用边框半径的 iframe 在 4 个角上有细曲线

发行:

曲线背后的原因似乎是YouTube的一些默认样式，以及浏览器留下的一些非常小的间距.如果您判断iframe，您会发现在您的iframe中有以下样式:

body {
  ...
  background-color: #000;
  ...
}

和

.html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-showing, .html5-video-player.ended-mode, .html5-video-player.ytp-fullscreen {
  background-color: #000;
}

This 2 black backgrounds are basically the thin curve lines on the 4 corners. If you search 和 remove them from the browser inspector the lines will disappear.

However I am afraid there isn't a simple solution to this since you can't edit the iframe styling anymore (an related question would be this one), 和 youtube somehow renders it's body just on the visible side of your container always. And if you have border radius this will result in the same outcome -> including if you load a bigger container inside a smaller one like this:

.custom-wrapper {
    width: 635px;
    height: 355px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    margin: 20px
}
.custom {
    width: 655px;
    height: 375px;
    position: absolute;
    top: -10px;
    left: -10px;
    overflow: visible
}
.custom iframe {
  width: 100%;
  height: 100%;
}

<h1>The iframe element</h1>


<div class="custom-wrapper">
<div class="custom">

<iframe src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves">
</iframe>
</div>
</div>

解决方案/替代选项:

如果创建不会影响IFRAME加载方式的人工边界半径，您可以try 执行以下操作.类似于:

.custom {
  margin: 20px;
  height: 360px;
  width: 640px;
  position: relative;
}

.custom::before {
  content: "";
  position: absolute;
  border-radius: 50px;
  padding: 20px;
  background: linear-gradient(45deg, #fff, #fff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  inset: -15px;
  z-index: 999;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  pointer-events: none;
}

<h1>The iframe element</h1>
<div class="custom">
  <iframe width="640px" height="360px" src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves">
  </iframe>
  <div class="white-bg"></div>
</div>

解释:

Basically we added a container for the iframe (positioned relative) 和 inside it also added a :before element which will act like the border radius we want.

You can read more about the artificial border radius approach here but basically what this does is:

1. From the link:个

• Appling a gradient as background 和 we make its origin the border box (by default it's the padding box).
• Using the mask property, we apply two opaque layers. The bottom one will cover the whole element 和 the top one will cover only the padding box (so it will not cover the border area)
• 排除顶层和底层，以便只显示边界区域
• 一些浏览器仍然不支持掩码合成，所以我们使用前缀版本.

2. Extra:个

• Since in this case we want to make the border only round the corners we have it inset: -15px; (or top: -15px; left: -15px;) 和 width: calc(100% - 5px); height: calc(100% - 5px); . This prevent any margin from being displayed.

PS: You might want to play a little with this values since they might not be perfect, but the look pretty close to your requirements. Basically if you make the width 和 height bigger it would trim more but in this case you need to reposition the :before element. If you get any lines you don't want on the edges just make the container smaller or move it slightly so the :before elements covers them.

• border-radius: 50px；你想要30，但这不是真正的边界半径，所以30不会完全符合你的情况.但是，您也可以使用此值.

• 这是可以更改的，但基本上是一个很大的索引，用于将元素定位在iframe上.还增加了pointer-events: none;以启用点击iframe(所以使用YouTube窗口).

• changed the colours for the background 和 the gradient to white (#fff) -> if you have another bg this should match the other one.

• 也增加了填充到20px，以便更容易隐藏角落.