解决 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>
效果如下：
想着使用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>
使用 translate3d 让子元素沿x正轴偏移100px
显示如下：
解决方案：
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>
使用 -webkit-mask-image 遮罩
效果如下：
该问题在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>
父元素增加 transform:translate3d 属性
<!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:rotote 属性
效果：同解决方案一中实现的效果如出一辙，在这里就不贴图了，有兴趣的朋友可以亲自证明一下。
transform的介绍：
三：补充内容(待注意)
1：关于感谢：
a:首先非常感谢大家对 Lying 的启迪。如有需要，留下你们的评论，随时提供服务。
b:感谢前文作者。Lying 在借鉴的原文章上增加了一些自个的见解。有时间咋们见个面呗
2:关于文章内容：
a:没有对浏览器做兼容测试。（搬砖中写的一篇文章）
b:Stackoverflow 上许多友人都说这是 google 的一个bug，因此在这里不能保证解决方案的第二条阐述的正确与否。但这条肯定是可以解决问题的 （chrome中亲测有效）
c:相信还会有其它的解决方案。（简单的看了 Stackoverflow 提供的一些方案，因此在这里没有列出，大家也可以查看文中提供的链接了解了解）
3：关于对Css 3 见解：
a:Css 3 的确是很值得学习的，今后 Lying 也会同大家一起一直保持着学习的积极性和善于分享的心。
解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题的更多相关文章
- CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- border-radius元素overflow:hidden失效问题
父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- ie6-7 overflow:hidden失效问题的解决方法
即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative; zoom: 1;触发haslayout 即可解决该BUG.
- 改变父元素的透明度，不影响子元素的透明度—css
1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...
- div高度自适应(父元素未知，所有高度跟随子元素最大的高度)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS子元素居中(父元素宽高已知，子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
随机推荐
- BZOJ: 1084: [SCOI2005]最大子矩阵
NICE 的DP 题,明白了题解真是不错. Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1228 Solved: 622[Submit][Stat ...
- Ckeditor注册事件
这段时间使用js+cookies进行自动草稿保存,个人觉的,这些全在客户端处理比较的好,所以没有使用AJAX+数据库的自动草稿保存方法. 结果出现Ckeditor无法绑定onkeyup,onselec ...
- C#正则表达式大全{转}
只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n位的数字:"^\d{n,}$". 只能输入m~ ...
- 白话CSS3的新特性
声明:这篇文章不是手册,所以不会说的很详细,只是告诉初学者CSS3显著的改进有啥,高手老手绕行. 一.在边框上的改进 1.可以给方框加圆角了,值越大越圆,解决了过去大方框的不美观 2.可以给控件加阴影 ...
- 使用Varnish代替Squid做网站缓存加速器的详细解决方案----转载
[文章作者:张宴 本文版本:v1.2 最后修改:2008.01.02 转载请注明出处:http://blog.s135.com] 我曾经写过一篇文章──<初步试用Squid的替代产品──Varn ...
- PATH环境变量和CLASSPATH环境变量详解
大凡装过JDK的人都知道要安装完成后要设置环境变量,可是为什么要设置环境变量呢?环境变量有什么作用? 1)PATH详解: 计算机安装JDK之后,输入“javac”“java”之类的命令是不能马上被计算 ...
- 安装微软ASP.NET MVC 4，运行以下的包管理器控制台命令
(菜鸟,勿喷,有错求指正)Asp.net 新建的类库中安装MVC4 .下面是步骤,1+2:打开程序包管理控制台,3:运行Install-Package Microsoft.AspNet.Mvc - ...
- php怎么获取checkbox复选框的内容？
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- HDU 3790 最短路径问题（SPFA || Dijkstra ）
题目链接 题意 : 中文题不详述. 思路 :无论是SPFA还是Dijkstra都在更新最短路的那个地方直接将花费更新了就行,还有别忘了判重边,话说因为忘了判重边WA了一次. #include < ...
- JSON.stringify 函数 (JavaScript)
在bsrck项目中,使用jQuery.Form.js的ajaxSubmit时,遇到有文件上传的form提交,在firefox和chrome浏览器中测试,报Bad Request的错误,经查代码后发现是 ...