WebKit 中元素 position: absolute 且 overflow:hidden 时子元素会溢出圆角区域 #24

/*
 * There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it. 
 * Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
 */
.masked {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.masked {
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}