border border iframeプラグインを作成

Question

hello私は半径の枠を作成するためにCSSコードを実行しますが、ブラウザのサイズが変更されると2つしか表示されません。

これは左の2ラウンドの角が後にリサイズ表示され、私の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

であるあなたのためであるあなたが100%にiframeの幅を設定して、特定のサイズにブラウザをリサイズし、それはです親コンテナdiv#widgetはブロック要素なので、iframeの幅は常に親DIVと同じで、埋め込みページではメインコンテンツの幅は約340ピクセルです。左は空白（白い背景）なので、右上div#widgetの幅が363px（メインコンテンツの幅340px +ボーダーの半径23px）を超えると、右下のコーダーが見えなくなります。&それは完璧に動作

#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>