首頁  >  文章  >  web前端  >  CSS中如何讓子元素尊重父元素的彎曲邊框?

CSS中如何讓子元素尊重父元素的彎曲邊框?

Patricia Arquette
Patricia Arquette原創
2024-10-30 15:54:02135瀏覽

How to make child elements respect parent’s curved border in CSS?

CSS中的「曲線邊框強制子元素遵守父元素邊框」

問題:

問題:

問題:
<code class="css">#outer {
  display: block;
  float: right;
  margin: 0;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}</code>

問題:

在HTML中,子元素被放置在父元素內部,且父元素具有曲線邊框。然而,子元素會超出父元素的曲線邊框範圍。如何讓子元素遵守父元素的曲線邊框?

CSS代碼範例:

答案:
<code class="css">#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}</code>

根據CSS3規範:被替換元素的內容總是修剪到內容邊緣曲線。 這意味著在父元素#outer上設定overflow:hidden應該有效。然而,這在Firefox 3.6及更低版本中不起作用。該問題已在Firefox 4中修復:圓角現在剪切內容和圖像(如果未設定overflow:visible)。 因此,解決方法應該是:此解決方案適用於Firefox 3.6及更低版本。

以上是CSS中如何讓子元素尊重父元素的彎曲邊框?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn