在一个应用了 border-radius 的圆角元素上，加上 overflow:hidden。子元素铺满。对于子元素超出圆角的部分可以被隐藏掉。形成一个圆角头像容器的结构。代码如下：
HTML
<div id="wrapper"> <div id="box"></div> </div>
CSS
#wrapper {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
background-color: #ccc;
background-clip: padding-box;
}
#box {
position :relative;
width: 100%;
height: 100%;
background-color: #cde;
-webkit-transition:all 0.5s ease;
transition:all 0.5s ease;
}
此时想在 #wrapper 容器内做一个画廊轮播的效果。对 #box 应用一个 transform 变化，使用 translate3d 对其进行横向偏移。会发现 #box 溢出了 #wrapper 的圆角范围。overfow:hidden; 失效。
#box.has-translate {
-webkit-transform:translate3d(100px,0,0);
transform:translate3d(100px,0,0);
}
transform 圆角溢出
解决方法
上 Stackoverflow 搜索一番。确实有这个 BUG 存在。找到的解决方案是可以使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。
mask-image(图片来源于 CSS遮罩 ? w3cplus )
回到刚才的例子。这里使用了一个纯黑色的 1px png 图像。应用 mask 遮罩后，就留下了#wrapper的实际内容区，没有受BUG影响。
#wrapper.has-mask-image{
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索应用
border radius 子元素、border radius、border radius兼容、css border radius、border radius 圆形，以便于您获取更多的相关知识。