使用边框半径将子元素剪辑到父元素

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

<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 http://codepen.io/Koopa/pen/xbaMez

Thanks

Koopa

当您向子级添加 css 3d 变换时，您可以将其移动到单独的 GPU 层。您可以将父元素移动到 GPU 层，而不是添加 null-transform hacktransform: translateZ(0) to .item。或者你可以更换translate with translateY（在这种情况下，仅当子项没有动画时才会被剪裁）。