Question

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

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

在为子项设置动画时，它会忽略父元素的border-radius。有没有办法修复顶部的两个角落？

.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图层，而不是将null-transform hack transform: translateZ(0)添加到.item。或者您可以将translate替换为translateY（在这种情况下，只有在未设置动画时才会剪切子项。）

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

1 个答案: