在jQuery中有一种方法来动画化Webkit和Mozilla浏览器中可用的css3 border-radius属性？
我没有找到一个插件，它会做到。
-webkit-border-radius -moz-border-radius
解决方法
我原本预期的东西像…
$("selector")
.css({borderRadius: 10});
.animate({borderRadius: 30},900);
…会工作。但是，我错了：Webkit允许你通过borderRadius设置所有四个角的值，但不会让你读回 – 所以与上面的代码，动画将始终从0而不是10. IE有同样的问题。 Firefox会让你读回，所以一切正常工作。
嗯… border-radius有一种执行差异的历史。
幸运的是，有一个解决方法：只单独指定每个角半径：
$("selector")
.css({
borderTopLeftRadius: 10,borderTopRightRadius: 10,borderBottomLeftRadius: 10,borderBottomRightRadius: 10 })
.animate({
borderTopLeftRadius: 30,borderTopRightRadius: 30,borderBottomLeftRadius: 30,borderBottomRightRadius: 30},900);
请注意，如果您希望保持与旧版浏览器的兼容性，则可以全部使用并使用旧的浏览器前缀名称：
$("selector")
.css({
borderTopLeftRadius: 10,borderBottomRightRadius: 10,WebkitBorderTopLeftRadius: 10,WebkitBorderTopRightRadius: 10,WebkitBorderBottomLeftRadius: 10,WebkitBorderBottomRightRadius: 10,MozBorderRadius: 10
})
.animate({
borderTopLeftRadius: 30,borderBottomRightRadius: 30,WebkitBorderTopLeftRadius: 30,WebkitBorderTopRightRadius: 30,WebkitBorderBottomLeftRadius: 30,WebkitBorderBottomRightRadius: 30,MozBorderRadius: 30
},900);
这开始变得很疯狂，虽然;我会避免它，如果可能的话。
