html - 创建边框半径 iframe 插件

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

调整大小后出现左边两个圆 Angular 是因为你将浏览器调整到一定大小，将iframe的宽度设置为100%，它是父容器 div#widget 是一个 block 元素，所以 iframe 的宽度总是和它的父 DIV 一样，而在你的嵌入页面中，主要内容宽度大约是 340px，左边是空白 (白色背景)，因此当 div#widget 宽度超过 363px(主要内容宽度 340px + 边框半径 23px)时，右上角和右下角的 corder 变得不可见。所以你应该限制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>