css - Chrome中的圆角不透明度过渡错误

Question

嗨，我刚刚发现了一个 chrome 错误。

我有一个元素，里面有一个覆盖。当我悬停它时，我希望覆盖层使用 CSS 淡入。

我已经这样做了： http ://codepen.io/iamrane/pen/AraJF

但是，如果您使用 chrome 浏览，您会发现当我将其悬停时边框半径消失了。这是因为我随着不透明度而褪色。但是，如果您将 opacity: 0 更改为 opacity: 1。您会看到圆角。所以css没有错。

如果我想要淡入效果，我该如何解决这个问题（请没有 js 答案）

Answer 1

添加@include border-radius(10px);到.my-overlayChrome 中的作品

.my-overlay {
    @include transition(opacity 0.2s ease);
    @include box-shadow(inset 0 0 10em 7em #000);
    @include border-radius(10px);
    opacity: 0; // Switch this to 1 to see that it works
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }