我正在尝试在下面的 JsFiddle 上制作一个可见的小动画。
但是正如您所见,在动画期间边框半径不起作用...
有解决办法吗?
http://jsfiddle.net/toroncino/V4V97/
这是我的代码:
a {
border-radius: 10px;
display: inline-block;
height: 300px;
overflow: hidden;
}
a img {
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
width: 100%;
height: 100%;
}
a:hover img {
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
最佳答案
它是 Webkit 中的一个长期存在的错误(参见 https://bugs.webkit.org/show_bug.cgi?id=68196 )被 Chromium 继承(参见 https://code.google.com/p/chromium/issues/detail?id=157218 )
解决方法已发布在 How to make CSS3 rounded corners hide overflow in Chrome/Opera 中
你基本上需要在容器元素上设置一个 CSS Mask
/*1x1 pixel black png*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
关于css - 使用 CSS3 过渡的溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19269465/