受大家启迪，于是最近深入研究了一下Css3中的一些属性。之中也是碰到了个不为我知的问题，在这里特此总结并与大家分享。

　　问题重现：在父元素上应用了 border-radius 的圆角属性、加上  overflow:hidden属性 、并且子元素填充整个父元素。于是看到的效果是：子元素超出父元素圆角的部分被隐藏掉，形成一个圆角头像容器的结构。代码如下：

　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.  
  12.         #father {
  13.             width: 200px;
  14.             height: 200px;
  15.             overflow: hidden;
  16.             border-radius: 50%;
  17.             background-color: #ccc;
  18.         }
  19.         #child {
  20.             background-color: red;
  21.             width: 100%;
  22.             height: 100%;
  23.             -webkit-transition:all 0.5s ease;
  24.             transition:all 0.5s ease;
  25.         }
  26.     </style>
  27.  
  28. </head>
  29. <body>
  30.  
  31. <div id="father">
  32.     <div id="child"></div>
  33. </div>
  34.  
  35. </body>
  36. </html>

　　效果如下：

　　想着使用translate3d实现对半圆的动画效果，于是乎问题就显现了。

　　问题描述：对  #child 应用一个 transform 变化，使用  translate3d 对其进行横向偏移。会发现  #child 溢出了 #father 的圆角范围。 overfow:hidden 失效。

　　代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.  
  12.         #father {
  13.             width: 200px;
  14.             height: 200px;
  15.             overflow: hidden;
  16.             border-radius: 50%;
  17.             background-color: #ccc;
  18.         }
  19.         #child {
  20.             background-color: red;
  21.             width: 100%;
  22.             height: 100%;
  23.             -webkit-transition:all 0.5s ease;
  24.             transition:all 0.5s ease;
  25.         }
  26.  
  27.         /*使用 translate3d 让子元素沿x正轴偏移100px*/
  28.         #child.add-translate {
  29.             -webkit-transform:translate3d(100px,0,0);
  30.             transform:translate3d(100px,0,0);
  31.         }
  32.     </style>
  33.  
  34. </head>
  35. <body>
  36.  
  37. <div id="father">
  38.     <div id="child" class="add-translate"></div>
  39. </div>
  40.  
  41. </body>
  42. </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 动画后就不会出现溢出的问题了。代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.  
  12.         #father {
  13.             width: 200px;
  14.             height: 200px;
  15.             overflow: hidden;
  16.             border-radius: 50%;
  17.             background-color: #ccc;
  18.         }
  19.         #child {
  20.             background-color: red;
  21.             width: 100%;
  22.             height: 100%;
  23.             -webkit-transition:all 0.5s ease;
  24.             transition:all 0.5s ease;
  25.         }
  26.  
  27.         /*使用 translate3d 让子元素沿x正轴偏移100px*/
  28.         #child.add-translate {
  29.             -webkit-transform:translate3d(100px,0,0);
  30.             transform:translate3d(100px,0,0);
  31.         }
  32.  
  33.         /*使用 -webkit-mask-image 遮罩*/
  34.         #father.add-mask-image{
  35.            -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  36.     }
  37.     </style>
  38.  
  39. </head>
  40. <body>
  41.  
  42. <div id="father" class="add-mask-image">
  43.     <div id="child" class="add-translate"></div>
  44. </div>
  45.  
  46. </body>
  47. </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 解决)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.  
  12.         #father {
  13.             width: 200px;
  14.             height: 200px;
  15.             overflow: hidden;
  16.             border-radius: 50%;
  17.             background-color: #ccc;
  18.             transform:translate3d(0,0,0);/*父元素使用transform:translate3d 属性*/
  19.             -webkit-transform:translate3d(0,0,0);
  20.         }
  21.         #child {
  22.             background-color: red;
  23.             width: 100%;
  24.             height: 100%;
  25.             -webkit-transition:all 0.5s ease;
  26.             transition:all 0.5s ease;
  27.         }
  28.  
  29.         /*使用 translate3d 让子元素沿x正轴偏移100px*/
  30.         #child.add-translate {
  31.             -webkit-transform:translate3d(100px,0,0);
  32.             transform:translate3d(100px,0,0);
  33.         }
  34.     </style>
  35.  
  36. </head>
  37. <body>
  38.  
  39. <div id="father">
  40.     <div id="child" class="add-translate"></div>
  41. </div>
  42.  
  43. </body>
  44. </html>

父元素增加 transform:translate3d 属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style>
  7.         html,body{
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.  
  12.         #father {
  13.             width: 200px;
  14.             height: 200px;
  15.             overflow: hidden;
  16.             border-radius: 50%;
  17.             background-color: #ccc;
  18.             -webkit-transform:rotate(0deg);/*父元素使用transform:rotate 属性*/
  19.             transform: rotate(0deg);
  20.         }
  21.         #child {
  22.             background-color: red;
  23.             width: 100%;
  24.             height: 100%;
  25.             -webkit-transition:all 0.5s ease;
  26.             transition:all 0.5s ease;
  27.         }
  28.  
  29.         /*使用 translate3d 让子元素沿x正轴偏移100px*/
  30.         #child.add-translate {
  31.             -webkit-transform:translate3d(100px,0,0);
  32.             transform:translate3d(100px,0,0);
  33.         }
  34.     </style>
  35.  
  36. </head>
  37. <body>
  38.  
  39. <div id="father">
  40.     <div id="child" class="add-translate"></div>
  41. </div>
  42.  
  43. </body>
  44. </html>

父元素增加 transform:rotote 属性

　　　　　效果：同解决方案一中实现的效果如出一辙，在这里就不贴图了，有兴趣的朋友可以亲自证明一下。

　　　　　transform的介绍：

　　　　　CSS3 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 失效的问题的更多相关文章

  1. CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

  2. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  3. border-radius元素overflow:hidden失效问题

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...

  4. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  5. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  6. ie6-7 overflow:hidden失效问题的解决方法

    即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative; zoom: 1;触发haslayout 即可解决该BUG.

  7. 改变父元素的透明度，不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  8. div高度自适应(父元素未知，所有高度跟随子元素最大的高度)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

随机推荐

  1. laravel where中多条件查询

    1. http://www.mobanstore.com/doc/bianchengkaifa/119.html //初学laravel 发现他的查询构造器很好用 //如下 $user = DB::t ...

  2. ubuntu安装hive

    1.安装mysql,可参考下面链接 http://www.cnblogs.com/liuchangchun/p/4099003.html 2.安装hive,之前,先在mysql上创建一个hive,数据 ...

  3. 关闭WordPress自动加载的Open Sans字体-WP访问过慢原因

    序言 wordpress大概从wp-3.8开始会自动加载Open Sans字体,并引用Google上面的CSS样式.而最近谷歌经常打不开,导致网站访问速度过慢,严重的会拖慢几十秒.Open Sans字 ...

  4. 【BZOJ1878】[SDOI2009]HH的项链 离线BIT

    1878: [SDOI2009]HH的项链 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义 ...

  5. poj 1724(有限制的最短路)

    题目链接:http://poj.org/problem?id=1724 思路: 有限制的最短路,或者说是二维状态吧,在求最短路的时候记录一下花费即可.一开始用SPFA写的,900MS险过啊,然后改成D ...

  6. ngrok本地反向代理

    ngrok本地反向代理 ngrok本地反向代理 使用ngrok可以把内网服务映射到外网 国内ngrok服务配置如下 在ngrok.exe所在的目录下添加ngrok.cfg文件 ngrok.cfg文件内 ...

  7. proc插入数据到数据库

    #include<stdio.h>EXEC SQL INCLUDE SQLCA; void insert (char password_[6],char id_[20],int balan ...

  8. ActiveMQ和Tomcat的整合应用(转)

    转自:http://topmanopensource.iteye.com/blog/1111321 ActiveMQ和Tomcat的整合应用 博客分类: ActiveMQ学习和研究   在Active ...

  9. malloc/free 和 new/delete 的区别

    1.malloc在C和C++中的区别 1.1.C中可以将任意的指针赋值给void*类型的变量.也可以将void*类型的值赋值给通常的指针变量. ---------------------------- ...

  10. 使用内网的Docker Image启动AcmeAir应用

    1.修改docker启动选项,添加信赖私有仓库 为了拉取docker.oneapm.me仓库里的镜像,我们需要将它添加为信赖仓库,方式是在启动选项中添加 --insecure-registry doc ...