父元素使用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. python基础一 day16 匿名函数

    def add(x,y): return x+y add = lambda x,y:x+yprint(add(1,2)) dic={'k1':10,'k2':100,'k3':30}def func( ...

  2. BundleConfig的作用

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

  3. GPT分区表的备份与恢复

    GPT分区表的备份与恢复  keenshoes 2016-01-13 21:02:25 关键词: GPT, Partition, MBR,APPLE, GUID, Protective MBR 对于现 ...

  4. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  5. Vim编辑器基础命令

    Linux系统中都默认安装了vi或vim编辑器,两种命令基本一致.vim为Vi IMproved,功能更强大. vim有命令模式,输入模式,和末行模式三种. ➢ 命令模式:控制光标移动,可对文本进行复 ...

  6. CentOS7 ngnix 的安装和配置

    刚开始我也在纠结到底是该用Apache呢还是Nginx?然后网上各种查看了它俩的对比,总结了它俩最大区别在于apache是同步多进程模型,在处理动态有优势:nginx是异步的,并发性能比较好,cpu内 ...

  7. 微信公众帐号开发之一(java)

    闲来没事,就记录一下微信公众平台的开发吧~ 其实微信公众平台开发没有想象中的那么困难,因为注册了微信公众平台帐号登录之后在开发者模式里有详细的文档,个人感觉介绍还是比较详细的. 微信公众平台订阅号和服 ...

  8. 二、Shell 变量

    Shell 变量 定义变量时,变量名不加美元符号($,PHP语言中变量需要),如: your_name="runoob.com" 注意,变量名和等号之间不能有空格,这可能和你熟悉的 ...

  9. goaccess 安装

    今天尝试搭建goaccess,用于分析access.log文件,但安装并不顺利,小记一下自己遇到的问题及解决方法 系统环境:CentOS release 6.9 一.参照官网教程进行搭建 $ wget ...

  10. python3 练习题100例 (十三)

    题目十三:将一个正整数分解质因数.例如:输入60,打印出60=2*2*3*5. #!/usr/bin/env python3 # -*- coding: utf-8 -*- ""& ...