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

解决方法:

父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。

/*image*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
/*gradient */
-webkit-mask-image: -webkit-radial-gradient(white, black);

border-radius元素overflow:hidden失效问题的更多相关文章

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

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

  2. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  3. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  4. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  5. overflow:hidden失效问题

    2018-08-03 Questions about work 这几天开发的时候遇到了个问题,如图1. 写了个demo demo 地址 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM ...

  6. overflow:hidden失效

    overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...

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

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  8. 在ie7中overflow:hidden失效问题及解决方案

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

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

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

随机推荐

  1. 如果int x=20, y=5,则语句System.out.println(x+y +""+(x+y)+y); 的输出结果是()

    答案是25255 小括号优先级高,所以先算小括号内的x+y=25 然后再算前面的x+y=25 但是中间有个空的字符串,java会把这个空字符串后面的都当成字符串看待,所以结果是25255

  2. Oracle下如何收集 Systemstate dump

    2: dump (不包括lock element) 10: dump 11: dump + global cache of RAC 256: short stack (函数堆栈) 258: 256+2 ...

  3. 使用IP地址方法登录MySQL数据库Can't connect to MySQL server的原因。mysql -h 192.168.1.104 -P3306 -uroot -p 失败

    mysql -h 192.168.1.104 -P3306 -uroot -p 然后输入你安装时设置的MySQL密码 发现Can't connect to MySQL server 你的IP 解决方法 ...

  4. 第26题:LeetCode572:Subtree of Another Tree另一个树的子树

    题目描述 给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 s 的一个节点和这个节点的所有子孙.s 也可以看做它自身的一棵子树. 示例 1: ...

  5. 更改 Linux 语言为中文

    查看当前系统语言环境:    echo $LANG 查看安了哪些中文语言包    locale -a |grep "zh_CN" 没有输出,说明没有安装,输入下面的命令安装     ...

  6. 进入docker容器并执行命令的的3中方法

    进入docker容器并执行命令的的3中方法 docker exec   nsenter   docker attach "container" 建议使用nsenter, exec有 ...

  7. 【转】html树形菜单控件

    Query plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-pl ...

  8. 【CSS】css控制模块到顶层或底层

    举例子,分别有div1和div2现要把div1控制在div2的顶层,可以这样做: } div.div2{} 两个要点:一.设置div的position为absolute,即绝对定位.二.z-index ...

  9. Python知识点进阶——生成器

    生成器 为什么要将列表转化为迭代器? 因为列表太大的话用内存太大,做成迭代器可以节省空间,用的时候再拿出部分. 生成器是不会把结果保存在一个系列中,而是保存生成器的状态,在每次进行迭代时返回一个值,知 ...

  10. OAuth2.0 social_django微博第三方登录

    python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目前流行的第三方 ...