在Chrome中制作动画时隐藏的角落变得可见

Question

我有一个ul border-radius: 10px; overflow:hidden，里面有多个li。

通常，ul角会隐藏内部内容。但是在Chrome中，当使用jQuery动画（淡出）li时，在动画期间，li角会变得可见。

动画完成后，li的角落将恢复隐藏。

我该怎么做才能防止这种情况发生？

这只发生在Webkit浏览器中：Chrome和Safari。

HTML：

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS：

ul {
    border-radius: 10px;
    overflow: hidden;
}

Answer 1

你可以试试这个：

// give specific border-radius to first ans last li
$('li:first').css('border-radius', '0 10px 0 0');
$('li:last').css('border-radius', '0 0 10px 0');

注意您也可以使用CSS

DEMO shows a sample animation