Question

在Google Chrome的最新稳定版本中：版本31.0.1650.63 m（也是Canary），当涉及边界半径和转换时仍然存在错误。应用了边框半径的元素内的内容在动画结束前不会被剪裁。

我设法通过转换“顶部”和“左”属性而不是translateX / translateY

来解决这个问题

http://codepen.io/iki_xx/pen/wCFuo

然而，我似乎无法找到动画不透明度的替代品。

http://codepen.io/iki_xx/pen/mspgE

是否修复了不透明度？

Answer 1

老实说，最简单的解决方案是为你的标题提供（略小）border-radius，如下所示：

.caption {
    ...
    border-radius:30px;
}

See a demo of this fix

Answer 2

你可以通过2种方式解决它：

  .thumb {
    position:relative;
    overflow: hidden;
    width:100%;
    border: 10px solid red;
    border-radius:55px;
    &:hover {

        .caption {
       background-color:red;
        }
      }
  }
  .caption {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
       background-color:transparent;
        border-radius: 35px;
    @include transition(all 3s ease-in-out);
  }

a）在内部元素中设置边框半径

b）设置背景颜色：透明并过渡

WebKit边界半径和过渡bug

2 个答案: