解决 border-radius 元素在应用了 transform 的子元素时overflow:hidden 失效的问题

　　受大家启迪，于是最近深入研究了一下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>

View Code