jquery - jQuery幻灯片：Chrome中渐变背景对象的圆角阴影

Question

我正在使用 jQueryslideUp()和slideDown()一个具有-webkit-gradient背景、圆角和box-shadow.

出于某种原因，这种精确的组合在 Chrome 中效果不佳。

我的规范说让两个底角是方形的（边界半径 0），因为它将与下面的东西对齐，但顶部的两个角是圆形的（边界半径大）。

http://jsfiddle.net/jdY3W/6/

问题是在slideUp()和slideDown()动画期间——仅在这些过渡期间，而不是在它们完成时——阴影在 Chrome 中显示为正方形。

图片：http: //i.stack.imgur.com/xGn12.png

我意识到了几件事：

1. 边界半径值的大多数组合都可以，但我需要的值不是。以下是我测试过的一些可以的示例：

   border-radius: 10px 20px 20px 20px;
   border-radius: 20px 20px 30px 0;
   border-radius: 20px 20px 20px 20px;
   border-radius: 20px 20px 19px 19px;
   

   还有一些不是：

   border-radius: 10px 20px 20px 25px;
   border-radius: 20px 20px 0 0; /* what I need */
   border-radius: 20px 20px 30px 30px;
   

2. 在 Safari 和 FF 中似乎一切正常。

有人有什么想法吗？