border-radius 应用了 transform 的子元素 overflow:hidden 失败如何解决

在一个应用了 border-radius 的圆角元素上，加上 overflow:hidden。子元素铺满。对于子元素超出圆角的部分可以被隐藏掉。形成一个圆角头像容器的结构。代码如下：

HTML

<pre class="brush:html;toolbar:false"><div id="wrapper">     <div id="box"></div> </div></pre>

CSS

<pre class="brush:css;toolbar:false">#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; }</pre>

此时想在 #wrapper 容器内做一个画廊轮播的效果。对 #box 应用一个 transform 变化，使用 translate3d 对其进行横向偏移。会发现 #box 溢出了 #wrapper 的圆角范围。overfow:hidden; 失效。

<pre class="brush:css;toolbar:false">#box.has-translate {     -webkit-transform:translate3d(100px,0,0);     transform:translate3d(100px,0,0); }</pre>

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 应用了 transform 的子元素 overflow:hidden 失败如何解决
解决ie7下display: inline-block失效的BUG
带你玩转css3的3D！
H5 C3如何展示3D效果的商品信息
css3绘制几何图形的例子
HTML5和CSS3实现3D展示商品信息的代码
关于移动端H5页面中1px边框的解决方法
Transform 属性会导致子元素的 fixed 属性失效
CSS3 transform实现3D立方体效果
CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法