[CSS] 解決 Safari 使用 border-radius 搭配 overflow: hidden 沒有圓角效果的問題

發表於 更新於 分類於 ， 閱讀次數：

Banner

最近在撰寫網站時，發現在 Safari 上使用 border-radius 搭配 overflow: hidden 沒有圓角效果，這其實是 Safari 在呈現計算上的錯誤 [Bug]，可以藉由設定遮罩讓其重新計算。

範例程式碼

1
2
3
4
5
element selector {
  border-radius: 10px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

或是設定 z-index 讓他重新計算堆疊位置，程式碼如下：

1
2
3
4
5
6
element selector {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

參考資料