CSS - 嵌入式iframe上的半径不起作用

Question

我想在我的website上的部分中嵌入一个iframe（Blogger），然后转过来。我正在使用CSS，并试图使用overflow: hidden;来描述here。由于一些奇怪的原因，我的工作不起作用 - 检查图像。

CSS：

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

section.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}   

在HTML中实现：

<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

如果我根据iframe在parrent元素上使用它，有人能告诉我为什么不溢出工作？

Answer 1

您的问题是您将border-radius: 10px;应用于<section>而不是<iframe>。代码应该如下所示：

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

iframe.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}

<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

只需将section.dnevnik更改为iframe.dnevnik。