如何使用 webkit-mask-image 使 CSS3 圆角隐藏 Chrome/Opera 中的溢出？答案

【问题标题】：How to make CSS3 rounded corners hide overflow in Chrome/Opera using webkit-mask-image?如何使用 webkit-mask-image 使 CSS3 圆角隐藏 Chrome/Opera 中的溢出？
【发布时间】：2012-11-14 09:11:21
【问题描述】：

我在哪里可以生成这种类型的 CSS 来制作右下边框？？？

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

这几乎可行，但我需要更多圆角

这是我目前的代码：

.container {
    width: 960px;
    height: 700px;
    background:#FFF;
    position:absolute;
    top: 0px;
    left: 50%;
    overflow:hidden;
    margin: 70px 0px 0px -480px;
    border: 0px solid #900;
    border-right: 15px solid #900;
    border-bottom: 15px solid #900;
    -webkit-border-radius-bottom-right: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-right-radius: 100px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    z-index: 55;
}

.slideshow {
    position:relative;
    width: 960px;
    height: 700px;
    top: -1600px;
    left: 0px;
    z-index: 51;
}

在除 Chrome 之外的所有应用中都表现出色

【问题讨论】：

标签： google-chrome css webkit rounded-corners image-masking

【解决方案1】：

Chrome 有一个 Webkit 错误...

Webkit 上的 CSS 边框半径不修剪图像

错误报告...

BUG WEBKIT

这意味着，如果您有一个绝对位置的 div，并且边框半径和溢出隐藏，则图像或里面的内容不会考虑溢出。一种解决方案是将图像插入主 div 的背景图像中，它可以工作。

【讨论】：