CSS 中的 overflow 與圓角的關係

通常是滿版畫面才會踩到這個雷。

紀錄

overflow 可以設定的值有：

• visible (預設值)
• clip
• auto
• hidden
• scroll
• inherit

overflow 有一個用途是拿來與 border-radius 結合來製作圓角效果。

如果一個容器元素中的子元素是 100%填滿容器的話，單單在容器元素中設定 border-radius 是看不出效果的，你會看到子元素的部分會凸出去容器外面。

這是因為 border-radius 本身並不會改變容器的寬度，並且 overflow 的預設值為visible，所以為了能夠正確的顯示圓角，你還得再對 overflow 這個屬性做調整。

其實我一直以為overflow: hidden是最正確的作法，因為這是一個很直覺的想法，就隱藏起來嘛！所以當然要設成 hidden 不是嗎？

大部分的情況下這是正確的，不過如果有一天容器的高度可能會被壓縮到很小的情況發生時，你就會發現這樣做會有個問題：

內容居然被腰斬了！

是的，因為這就是overflow:hidden的作用，只要超出容器範圍的所有東西都會被隱藏起來。

所以當我發現這個問題後，我上網做了一些研究，才發現另外一件事：

如果想要將溢出容器的範圍給隱藏起來，其實並不是只有overflow:hidden這個做法，而是：

只要把 overflow 設為 visible 以外的值即可。

原理：只有 visible 這個值不會對容器做裁切

示範

<div class="box">
  <div class="box__inner"></div>
</div>

html, body {
  /*
    設定為跟視窗一樣的高（全屏）
  */
  height: 100%;
  box-sizing: border-box;
  padding: 40px 0;
}
.box {
  /*
    跟 body 一樣高，所以當視窗縮小時，
    box 的高度也會跟著縮小
  */
  width: 500px;
  height: 100%;
  margin: auto;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: black;
  /*
    如果是 hidden，把視窗的高縮小時 box 會被腰斬，
    如果是 auto，box 裡面就會產生滾軸，不會被腰斬。
  */
  overflow: hidden;
  overflow: auto;
}
.box__inner {
  width: 100%;
  height: 400px;
  background-color: orange;
}

overflow: hidden：

overflow: auto：