将子项剪切到具有边框半径的父元素 [英] Clip child to parent element with border-radius

问题描述

如何强制将子项剪切到具有圆角的父元素中.

How do I force clip a child to a parent element that has rounded corners.

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

为子项设置动画时，其会忽略父元素的边界半径.有没有办法固定顶部的两个角?

When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top?

.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

谢谢

Koopa

推荐答案

向子级添加css 3d转换时，可以将其移至单独的GPU层.您可以将父元素移动到GPU层，而不是将空变换hack transform: translateZ(0)添加到.item.或者，您可以将translate替换为translateY(在这种情况下，仅当不对子对象进行动画处理时才对其进行裁剪).

When you add a css 3d transform to the child, you kinda move it to the separate GPU layer. You can move parent element to GPU layer instead adding null-transform hack transform: translateZ(0) to .item. Or you can replace translate with translateY (In this case child is clipped only when not being animated).

这篇关于将子项剪切到具有边框半径的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！