时间戳

首页 > 解决方案 > 使用 CSS 循环裁剪 iframe

html - 使用 CSS 循环裁剪 iframe

问题描述

我已经使用边框半径将方形 iframe 切割为圆形（使用具有边框半径：50% 的 earth2 类），但它仍然在地球周围保留黑色边框。我想裁剪以仅显示地球。我的代码在下面，我还可以进行哪些更改来裁剪黑色背景？

我当前的预览在这里：

我当前的预览在这里

我的代码是：

<style> 
.main_content {
  width: auto;
  height: auto;
  position: relative;
}
.earth2{
    border-radius:50%;
    border-width:267px;
}

.earth {
  width:400px;
  height:400px;
  border-radius:50%;
  left: 50%;
  top:50%;
  margin-left: -200px;
  margin-top: -200px;
  padding: 0px;
  background-color: red;
  position: absolute;
  opacity:0.8;
}
</style>

<div class="main_content">
    <div class="graph" id="canvas-holder" style="width:100%">
    <canvas id="chart-area" width="500" height="500"></canvas>
    </div>

<div class="earth">
    <iframe class="earth2" src="https://solarsystem.nasa.gov/gltf_embed/2393" width="400px" height="400px" frameborder="0" >
    </iframe>
</div>
</div>

标签： htmlcssiframe

解决方案

您可以应用边框 0px 以使边框消失到 div“地球”

推荐阅读