父元素設置了overflow:hidden和border-radius，子元素超出部分不隱藏？

部分低端手機中，父元素設置了overflow:hidden和border-radius後子元素超出部分並不能隱藏，如何解決？

測試機是 小米1s

---

我當初是在UC瀏覽器碰到類似的問題，UC工程師告訴我，後面新版支持，我不知道你是不是UC瀏覽器，但我在小米其他瀏覽器中測試，都是正常的。

---

不行就用蒙版做吧（最近和蒙版杠上了）

---

如果是因為設置了transform的話，有一個workaround的解決辦法，就是設置

-webkit-mask-image


之前在做圓環旋轉的時候有遇到過類似的問題，css3 - Webkit overflow issue on border-radius and transform

---

表示遇到到，好無語…

---

我也遇到過這個問題 經測在圓角的div上加 -webkit-transform:rotate(0deg) 有效

---

如果是transform屬性引起的bug，去除radius、overflow父元素里的內部元素transform屬性。用其它屬性實現所需效果。

---

Edit fiddle - JSFiddle

我按照這個裡面的方法解決了這個問題。

簡單來說就是在父元素和子元素中間再加一層，把中間層設置成

border-radius: 100px;
overflow: hidden;


具體如下：

CSS

#wrapper {
position: absolute;
}

#middle {
border-radius: 100px;
overflow: hidden;
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}


HTML

&
&
&& & &

---

你是不是要把圖片設置為圓角的？如果是這樣的話子元素也就是圖片本身也設置border-radius為5rem

---

同樣的問題，不知道lz解決了么有

---

您好 表示也遇到了此問題 解決了嗎？

---

子元素也添加border-radius

---

再加一個container，radius和overflow分開設在兩個不同的container上。

---

推薦閱讀：