WebKit边框半径和转换错误

在谷歌浏览器的最新稳定版本：版本31.0.1650.63米（Canary也），当涉及到边框半径和过渡时仍然存在一个错误。应用边框半径的元素内部的内容在动画结束之前不会被剪裁。WebKit边框半径和转换错误

我已经成功通过转换“顶”和“左”的属性，而不是平移X /平移Y去解决它

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

不过，我似乎无法找到动态的透明的替代品。

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

是否有混浊的位置吗？

来源

2013-12-16 Ivan V.

您可以修复它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); 
    }

一）设置边界半径在内部元件

二）设置背景颜色：透明和过渡是

来源

2013-12-16 20:50:04 vals

使用“背景透明”可以做到这一点。此外，不需要在“.caption”元素上设置边框半径。 http://codepen.io/iki_xx/pen/HIcEJ –

老实说，最简单的解决方案也为您的字幕提供了一个（略小）border-radius，像这样：

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

See a demo of this fix。

来源

2013-12-16 20:46:23 egid

我已经试过了，但只有当标题与边框颜色相同时才有效，但情况并非总是如此。 –

WebKit边框半径和转换错误

回答

相关问题