WebKit 边框半径和过渡错误答案

【问题标题】：WebKit border radius and transition bugWebKit 边框半径和过渡错误
【发布时间】：2013-12-16 20:40:01
【问题描述】：

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

我已经设法通过转换“top”和“left”属性而不是 translateX / translateY 来解决这个问题

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

但是我似乎找不到动画不透明度的替代品。

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

是否有解决不透明度的方法？

【问题讨论】：

标签： css css-animations

【解决方案1】：

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

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

See a demo of this fix.

【讨论】：

我试过了，但它只在标题与边框颜色相同时才有效，但并非总是如此。

【解决方案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) 设置 background-color: 透明和过渡

【讨论】：

使用“背景透明”就可以了。此外，无需在“.caption”元素上设置边框半径。 codepen.io/iki_xx/pen/HIcEJ