Question

你好我运行css代码创建一个半径边框，但只出现其中两个，当浏览器调整大小时我可以看到所有四个半径边界，为什么会发生这种情况？

这是我的CSS和HTML代码

iframe, #wbf{

    border-bottom-left-radius: 23px !important;
    border-bottom-right-radius: 23px !important;
    border-top-left-radius: 23px !important;
    border-top-right-radius: 23px !important;
}

 <div class="col-md-4" id="widget">

 <iframe id="wbf" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCl%25C3%25ADnica-Materno-Infantil-Casa-Del-Ni%25C3%25B1o-SA-399571326824453%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="393" style="border:none;overflow:hidden;padding-top:0.5%" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


 </div>

Answer 1

调整大小后左侧两个圆角是因为您将浏览器的大小调整为特定大小，因为您将iframe的宽度设置为100%，并且它的父容器为div#widget是一个块元素，因此iframe的宽度始终与它的父DIV相同，并且在您的嵌入页面中，主内容宽度大约为340px，左边是空白（白色背景），因此右上角和右上角是当div#widget宽度超过363px（主内容宽度340px +边界半径23px）时，右下角度变为不可见。因此，您应该限制iframe或div#widget的宽度：

#widget {
   width: 340px;
}
iframe, #wbf{
    border-radius: 23px;
}

 <div class="col-md-4" id="widget">

 <iframe id="wbf" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCl%25C3%25ADnica-Materno-Infantil-Casa-Del-Ni%25C3%25B1o-SA-399571326824453%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="393" style="border:none;overflow:hidden;padding-top:0.5%" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


 </div>

创建边框半径iframe插件

1 个答案: