1. Andriod 4.2.x下明明设置了border-radius，但是背景色会溢出
-
代码和效果如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .demo { width: 200px; height: 40px; border: 1px solid #000; background: pink; border-radius: 20px; overflow: hidden; color: #36e; } </style> </head> <body> <div class="demo">test</div> </body> </html> -
想要实现的效果：
- 但是，在部分的机型下，如图：
-
说明：
背景颜色就溢出了，但是border还是正常实现的。用了overflow: hidden;都不行。 -
解决办法：
-webkit-background-clip: padding-box; background-clip: padding-box; -
原理
background-clip是指背景的显示区域。
-
可能的值：
border-box(默认)：背景延伸到边框外沿。
padding-box：背景延伸到内边距外沿。
content-box：背景裁剪到内容区外沿。
inherit在这个例子中，溢出部分属于边框以外，需要显示的部分则是边框以内，所以用的是background-clip: padding-box;这个属性。
-
background-clip兼容性
2. transform子元素在overflow: hidden;父元素下依旧会溢出
-
情景：
这个问题不再是兼容性问题，正常的浏览器都能看见。
最近在做一个弹幕，container是用border-radius的，里面的文字元素是通过transform来实现平移。
但是问题来了：通过transform来平移的文字元素会显示在border-radius以外的地方，设置了overflow: hidden;也不行，背景颜色和其它都是正常的。 -
可以明显看出来，transform的元素的父元素使用了overflow: hidden;依旧还是无效，字体依旧溢出。
-
解决办法：
很简单，只要在父元素加一段css即可：
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==');这是一张1px的纯黑色图，具体请看下面的原理。
-
代码和效果：
-
原理
-webkit-mask-image: url('')会在图片中读取透明信息。（透明：没有，黑色：透明，白色：不透明，其它：介于两者之间）
-webkit-mask-image: url('')作用于当前元素的background。transform作用的是子元素，和父元素没有关系，自然就被遮盖了。
-
mask兼容性
它不是标准，需要加-webkit-前缀。如果有更多的发现，欢迎补充。
具体请看：http://caniuse.com/#search=mask
