通過(guò)生成堆疊上下文，可以輕松解決此問(wèn)題，包括使用isolation: isolate、設(shè)置position和z-index以及transform技巧。
在使用 Safari 瀏覽器查看 HTML 時(shí)，即使在父元素中設(shè)置了 overflow: hidden 和 border-radius，子元素仍然可能超出 border-radius 的范圍而顯示的問(wèn)題。
問(wèn)題：
盡管在父元素中設(shè)置了 overflow: hidden 和 border-radius 以應(yīng)用圓角樣式于子元素，但在桌面版 Safari 或 iOS 上的 Chrome 等瀏覽器中，子元素仍然可能在 border-radius 的范圍之外顯示。
例如，通過(guò)以下方式將 <img> 放在 <div> 中，設(shè)置 overflow: hidden 和 border-radius 就能復(fù)現(xiàn)這個(gè)現(xiàn)象。
HTML：
<div class="parent"> <img src="avatar.jpg" width="100" height="100" /> </div>
CSS：
.parent {
overflow: hidden;
border-radius: 50%;
}當(dāng)然，如果直接在要應(yīng)用樣式的元素上設(shè)置 border-radius，則會(huì)按預(yù)期顯示（理所當(dāng)然）。因此，問(wèn)題只在設(shè)置了 overflow: hidden 和 border-radius 的父元素時(shí)才會(huì)出現(xiàn)。
我在以下瀏覽器版本中能夠復(fù)現(xiàn)這個(gè)現(xiàn)象：
macOS Safari: 15.4 (17613.1.17.1.13)
iOS Chrome: 100.0.4896.85
iOS Brave: 1.37 (22.4.6.8)
原因：
直接進(jìn)入結(jié)論，似乎 Safari（準(zhǔn)確說(shuō)是 WebKit）的一個(gè) bug（？）是問(wèn)題的原因。
在 WebKit Bugzilla 的 Bug 140535 中稱其為“僅在非堆疊上下文中發(fā)生”。140535 – Border-radius clip of non-stacking composited descendant doesn't work bugs.webkit.org/show_bug.cgi?id=140535
為了驗(yàn)證這一點(diǎn)，如果添加生成堆疊上下文的 CSS 屬性，問(wèn)題將得到解決。
解決方法：
因?yàn)閱?wèn)題似乎僅在非堆疊上下文中發(fā)生，所以可以通過(guò)有意地生成堆疊上下文來(lái)避免。具體而言，有以下幾種方法可以在不影響外觀的情況下生成堆疊上下文：
方法 1
設(shè)置 isolation: isolate
.parent {
isolation: isolate;
}方法 2
設(shè)置 position 和 z-index
.parent {
position: relative; z-index: 0;
}方法 3
設(shè)置 transform文章來(lái)源：http://www.zghlxwxcb.cn/article/757.html
.parent {
transform: translateZ(0);
}從本質(zhì)上來(lái)說(shuō)，“生成堆疊上下文”的意思來(lái)說(shuō)，最直接的可能是方法 A) 中的 isolation: isolate。如果沒(méi)有其他特殊原因，可能最好選擇 【方法1】。文章來(lái)源地址http://www.zghlxwxcb.cn/article/757.html
到此這篇關(guān)于解決Safari以及iOS上的其他瀏覽器子元素不受border-radius作用的問(wèn)題的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
