博客列表 >关于chrome浏览器设置了display:flex之后border-radius属性不生效的问题解决方法

关于chrome浏览器设置了display:flex之后border-radius属性不生效的问题解决方法

MArtian
MArtian原创
2019年11月06日 11:10:391927浏览

在元素变成弹性盒子之后,父对象设置圆角后不会遮住子元素的块

p1.png

虽然圆角生效了,但是鼠标滑过标签后的:hover效果生效后,圆角并没有遮挡住块标记的指教

这本身是chrome浏览器的一个bug,我们要用一个图片来遮挡

{

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
 overflow: hidden; 

}

添加以上属性

p3.png

问题解决。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议