使用边框半径将子元素裁剪为父元素

Question

如何强制将子元素裁剪到具有圆角的父元素。

<div class="item" >
  <div class="top">
    <h1>Tile</h1>
    <h2>Click me</h2>
  </div>
  <div class="behind">
    <h3>Details</h3>
  </div>
</div>

对子元素进行动画处理时，它会忽略父元素的边框半径。有没有办法固定顶部的两个角？

.item{
  text-align: center;
  cursor: pointer;
  overflow: hidden; 
  height: 280px;
  width: 280px;
  float: left;
  border-radius: 5px;
  background: white;
  margin: 10px; 
  position: absolute;
}
.top{
  z-index: 1;
  position: absolute;
  height: 280px;
  width: 280px;
  background: #ed844b;
  transition: 0.3s; 
  border-radius: 5px;
}
.behind{
  z-index: 0;
  position: absolute;
  width: 100%;
  top: 136px;
  height: 138px;
  padding: 10px 16px;
  background: #DDDDDD;   
  box-sizing: border-box;
  border-radius: 5px;
}
.slide-up{
  transform: translate3d(0, -136px, 0);   
  border-radius: 0px;
}

这是一个小演示：http://codepen.io/Koopa/pen/xbaMez

谢谢

库帕

Answer 1

当您将 css 3d 转换添加到子级时，您会将其移动到单独的 GPU 层。您可以将父元素移动到 GPU 层，而不是将零转换黑客transform: translateZ(0)添加到.item。或者，您可以将translate替换为translateY（在这种情况下，仅当未进行动画处理时，才会剪裁子项）。