博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
border-radius元素overflow:hidden失效问题
阅读量:5214 次
发布时间:2019-06-14

本文共 530 字,大约阅读时间需要 1 分钟。

父元素使用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);

 

转载于:https://www.cnblogs.com/mengff/p/7526379.html

你可能感兴趣的文章
关于easyui combobox下拉框实现多选框的实现
查看>>
[并查集][贪心]Luogu P1525 关押罪犯
查看>>
项目开发日志(其一)
查看>>
ubuntu乌班图安装配置NFS
查看>>
CentOS6.6修改系统盘的默认的LVM卷组VolGroup
查看>>
酷,无极限!3D打印「活」跑鞋研发中,会自行充放气、再生
查看>>
迪杰斯特拉算法---单源点最短路径
查看>>
【python】TCP/IP编程
查看>>
JVM 类型的生命周期学习
查看>>
图片加载失败显示默认图片占位符
查看>>
2018 ZJCPC
查看>>
【★】浅谈计算机与随机数
查看>>
[SoapUI] 在执行某个TestSuite之前先执行login或者其他什么前置步骤
查看>>
[转载]宇宙文明等级的划分标准
查看>>
Jmeter的log输出控制
查看>>
《代码阅读方法与实现》阅读笔记一
查看>>
ActiveMQ配置使用 for CentOS6
查看>>
解决 sublime text3 运行python文件无法input的问题
查看>>
javascript面相对象编程,封装与继承
查看>>
字符的相加输出
查看>>