html - 用边界半径和 translate3d 隐藏的溢出

Question

当块的内容被overflow: hidden;翻译border-radius时，它的角落并没有被隐藏。有什么解决方案可以解决这个问题吗？

HTML

<div class="scroller">
    <div class="scroller-content"></div>
</div>

CSS

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
    -webkit-transform: translate3d(0, -8px, 0);
}

http://jsfiddle.net/aZ5Qn/

Answer 1

准确地说，你可以把

transform: translate3d(0,0,0);

在您需要overflow+border-radius组合的元素上...

Answer 2

由于您没有在翻译中使用 z，您可以将其更改为 translate2d，这确实有效：

演示

.scroller{
width: 300px;
height: 500px;
border: 3px solid red;
border-radius: 30px;
overflow: hidden;
}
.scroller-content{
width: 300px;
height: 300px;
background: green;
-webkit-transform: translate(0, -8px);
}

这记录在 Chtiwi Malek 提供的链接中，但它指出这仅适用于移动浏览器，我在桌面上遇到了这个问题。

编辑

如果您在同一元素中设置溢出和转换，它也可以工作（至少在桌面上）

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;   
    -webkit-transform: translate3d(0, -8px, 5px);
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
}