受大家啟迪，於是最近深入研究了一下Css3中的一些屬性。之中也是碰到了個不為我知的問題，在這里特此總結並與大家分享。
問題重現：在父元素上應用了 border-radius 的圓角屬性、加上 overflow:hidden屬性 、並且子元素填充整個父元素。於是看到的效果是：子元素超出父元素圓角的部分被隱藏掉，形成一個圓角頭像容器的結構。代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style> html,body{ width: 100%; height: 100%; } #father { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; background-color: #ccc; } #child { background-color: red; width: 100%; height: 100%; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } </style> </head> <body> <div id="father"> <div id="child"></div> </div> </body> </html>
效果如下：
想着使用translate3d實現對半圓的動畫效果，於是乎問題就顯現了。
問題描述：對 #child 應用一個 transform 變化，使用 translate3d 對其進行橫向偏移。會發現 #child 溢出了 #father 的圓角范圍。 overfow:hidden 失效。
代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style> html,body{ width: 100%; height: 100%; } #father { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; background-color: #ccc; } #child { background-color: red; width: 100%; height: 100%; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } /*使用 translate3d 讓子元素沿x正軸偏移100px*/ #child.add-translate { -webkit-transform:translate3d(100px,0,0); transform:translate3d(100px,0,0); } </style> </head> <body> <div id="father"> <div id="child" class="add-translate"></div> </div> </body> </html>
顯示如下：
解決方案：
1：使用webkit-mask-image 覆蓋圓角溢出部分。(文章后面會提供關於webkit-mask-image的相關介紹)
-webkit-mask-image 可以使用圖片、Gradient 漸變或者 SVG mask 作為元素的 mask 遮罩。在 WebKit 的兼容性還算可以。
(圖片來源於 CSS遮罩 – w3cplus )
回到剛才的問題。在這里使用一個純黑色的 1px png 圖像。應用 mask 遮罩解決該問題。在#father 上應用 add-mask-image類名后，#child觸發 transform 動畫后就不會出現溢出的問題了。代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style> html,body{ width: 100%; height: 100%; } #father { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; background-color: #ccc; } #child { background-color: red; width: 100%; height: 100%; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } /*使用 translate3d 讓子元素沿x正軸偏移100px*/ #child.add-translate { -webkit-transform:translate3d(100px,0,0); transform:translate3d(100px,0,0); } /*使用 -webkit-mask-image 遮罩*/ #father.add-mask-image{ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } </style> </head> <body> <div id="father" class="add-mask-image"> <div id="child" class="add-translate"></div> </div> </body> </html>
效果如下：
該問題在Stackoverflow的討論：
webkit-overflow-issue-on-border-radius-and-transform
how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera
有關-webkit-mask-image的簡單介紹：
http://ued.ctrip.com/webkitcss/prop/mask-image.html
2：父元素加上 transform 屬性。
子元素在使用了 transform 屬性后致使它改變了原有的默認維度，而這時的父元素無任何改變，仍為2d維度(css默認都為2d維度)。因此導致了子元素使用translate3d屬 性后出現溢出的情況。接下來只要在原有的父元素樣式中加上 transform 屬性將父元素改變維度即可。(可以使用translate3d 或 rotate 解決)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style> html,body{ width: 100%; height: 100%; } #father { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; background-color: #ccc; transform:translate3d(0,0,0);/*父元素使用transform:translate3d 屬性*/ -webkit-transform:translate3d(0,0,0); } #child { background-color: red; width: 100%; height: 100%; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } /*使用 translate3d 讓子元素沿x正軸偏移100px*/ #child.add-translate { -webkit-transform:translate3d(100px,0,0); transform:translate3d(100px,0,0); } </style> </head> <body> <div id="father"> <div id="child" class="add-translate"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style> html,body{ width: 100%; height: 100%; } #father { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; background-color: #ccc; -webkit-transform:rotate(0deg);/*父元素使用transform:rotate 屬性*/ transform: rotate(0deg); } #child { background-color: red; width: 100%; height: 100%; -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } /*使用 translate3d 讓子元素沿x正軸偏移100px*/ #child.add-translate { -webkit-transform:translate3d(100px,0,0); transform:translate3d(100px,0,0); } </style> </head> <body> <div id="father"> <div id="child" class="add-translate"></div> </div> </body> </html>
效果：同解決方案一中實現的效果如出一轍，在這里就不貼圖了，有興趣的朋友可以親自證明一下。
transform的介紹：
三：補充內容(待注意)
1：關於感謝：
a:首先非常感謝大家對 Lying 的啟迪。如有需要，留下你們的評論，隨時提供服務。
b:感謝前文作者。Lying 在借鑒的原文章上增加了一些自個的見解。有時間咋們見個面唄
2:關於文章內容：
a:沒有對瀏覽器做兼容測試。（搬磚中寫的一篇文章）
b:Stackoverflow 上許多友人都說這是 google 的一個bug，因此在這里不能保證解決方案的第二條闡述的正確與否。但這條肯定是可以解決問題的 （chrome中親測有效）
c:相信還會有其它的解決方案。（簡單的看了 Stackoverflow 提供的一些方案，因此在這里沒有列出，大家也可以查看文中提供的鏈接了解了解）
3：關於對Css 3 見解：
a:Css 3 的確是很值得學習的，今后 Lying 也會同大家一起一直保持着學習的積極性和善於分享的心。