使用 border-radius 将子元素剪辑到父元素

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 层，而不是将零变换 hack transform: translateZ(0) 添加到 .item。或者您可以将 translate 替换为 translateY（在这种情况下，仅当未设置动画时，child 才会被剪裁）。

使用 border-radius 将子元素剪辑到父元素

Clip child to parent element with border-radius

css

overflow

rounded-corners

clip

css-animations