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

Question

您好，我刚刚发现了一个 Chrome 错误。

我有一个元素，其中有一个叠加层。当我悬停它时，我希望叠加层使用 css 淡入。

我是这样做的: http://codepen.io/iamrane/pen/AraJF

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

如果我想要淡入淡出效果，我该如何解决这个问题(请不要回答 js)

Answer 1

添加 @include border-radius(10px); 到 .my-overlay 在 Chrome 中有效

.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;
  }