如何讓子元素尊重 CSS 中的彎曲邊框：溢出問題？

解決CSS 中的子父邊界服從困境

在處理CSS 中的嵌套元素時，通常需要子元素遵循其父元素的彎曲邊框。但是，這有時可能會成為一個問題，導致子元素超出其父元素的限制。

問題：

考慮以下HTML 和CSS 程式碼：

<code class="html"><div id="outer">
  <div id="inner"></div>
</div></code>

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

#inner {
  background-color: green;
  height: 10px;
}</code>

在這種情況下，#inner div🎜>

在這種情況下，#inner div 將超出#outer div 的彎曲邊框，從而產生不必要的重疊。

解決方案：

根據 CSS3 規範，諸如塊級元素之類的元素會被剪切到其父邊框的曲線上。不過，也有一些例外，其中之一就是替換元素。

替換元素：

替換元素，例如 等。和

修正：

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

#inner {
  background-color: green;
  height: 10px;
}</code>

確保 #inner div 遵循#outer div的彎曲邊框，我們可以使用CSS3的overflow屬性。透過在父元素（#outer）上設定溢位：隱藏，我們強制其中的內容被其邊框遮蓋。

注意：此技巧適用於 Firefox 4以上。對於舊版的 Firefox，可能需要額外的供應商前綴。

以上是如何讓子元素尊重 CSS 中的彎曲邊框：溢出問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！