父元素使用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. os.walk 模块

    os.walk()可以得到一个三元tupple(dirpath, dirnames, filenames),其中第一个为起始路径,第二个为起始路径下的文件夹,第三个是起始路径下的文件. 其中dirpa ...

  2. Dropout & Maxout

    [ML] My Journal from Neural Network to Deep Learning: A Brief Introduction to Deep Learning. Part. E ...

  3. 第17题:打印1到最大的n位数

    面试题17:打印1到最大的n位数  题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 考点: 用字符串或者数组表达一个大数. 思路 1. ...

  4. python笔记-dict字典的方法

    #!/usr/bin/env python #-*- coding:utf-8 -*- #打印0001-9999的数字 for i in range(9999): s = "%04d&quo ...

  5. INNODB insert query end state

    innodb_flush_log_at_trx_commit=2 innodb_flush_method=O_DIRECT (for non-windows machine) innodb_buffe ...

  6. 初级React入门

    一.引入Reactjs 方法一:直接下载相关js文件引入网页,其中react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 ...

  7. python3 练习题100例 (十五)

    这个比较难,主要难在考虑的问题太多,有好几个还没写出来.有空再来改进.请高手指教! #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ ...

  8. 从0到n-1中随机等概率输出m个不同的数

    //假设输入的n远大于m void knuth(int n, int m) { for (int i = 0; i < n; i++) { if (rand() % (n - i)<m) ...

  9. Network of Schools POJ - 1236 (强联通)

    一些学校连接到了一个计算机网络.网络中的学校间有如下约定:每个学校维护一个列表,当该学校收到软件或信息后将会转发给列表中的所有学校(也就是接收方列表).需要注意的是如果B学校在A学校的接收方列表中,A ...

  10. Spring加载配置文件的几种方法(org.springframework.beans.factory.BeanDefinitionStoreException)

    一:Spring中的几种容器都支持使用xml装配bean,包括:XmlBeanFactory ,ClassPathXmlApplicationContext ,FileSystemXmlApplica ...