移动端 Border-Radius 溢出处理

问题 1: 部分机型下, 设置 border-radius 以及 overflow:hidden 会造成背景颜色溢出

解决: background-clip: padding-box

原理: background-clip 是颜色颜色显示区域, 设置为 padding-box

问题 2: transform 的子元素在父元素 overflow:hidden 之后还是会溢出

解决办法: 在父元素加上一段 css

-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==');

这是一张 1px 的纯黑色图片

原理: -webkit-mask-image:url(‘’), 会在图片上添加蒙版(黑色表示将内容透明, 白色表示将内容显示, 介于中间表示半透明)