如何为元素设置动画而不丢失边框半径？答案

【问题标题】：How to animate an element and not lose border-radius?如何为元素设置动画而不丢失边框半径？
【发布时间】：2012-06-11 16:01:00
【问题描述】：

我在中心图像上做了一个小动画，它会放大一点，然后恢复到原来的大小。

问题是，动画“覆盖”了父元素上的边框半径，即使它上面隐藏了溢出。

有什么想法吗？

【问题讨论】：

【解决方案1】：

这是 Webkit 中的一个错误。 overflow: hidden 不会在角落隐藏转换元素的溢出。欲了解更多信息，请查看https://bugs.webkit.org/show_bug.cgi?id=67950。

【讨论】：

【解决方案2】：

问题是您的.image 类的background-color 扩展到#promo 并覆盖了pane 类设置的border-radius。

你必须设置：

background-color: transparent; //in image class,

和，

background-color: #91bd09;

在您的 pane 班级中。

看到这个updated fiddle。

【讨论】：

如果你把图片放在那里，你仍然会遇到问题。注意文本仍然显示在边框之外。
好吧，我不是 CSS 忍者...所以感谢您的信息 :) 我只是尝试使用 border 部分，它给了我积极的结果，我在这里说过......下次会保重.. :)